0
# Utility Functions
1

2
Configuration and utility functions for customizing React Konva behavior, accessing the reconciler, and managing rendering modes.
3

4
## Capabilities
5

6
### Strict Mode Configuration
7

8
Function to enable or disable strict mode for property updates, affecting how React Konva handles prop changes and validation.
9

10
```typescript { .api }
11
/**
12
 * Configure strict mode for property updates
13
 * Controls validation and update behavior for Konva node properties
14
 * @param useStrictMode - Enable or disable strict mode
15
 */
16
var useStrictMode: (useStrictMode: boolean) => void;
17
```
18

19
**Usage Examples:**
20

21
```typescript
22
import React from 'react';
23
import { Stage, Layer, Rect, useStrictMode } from 'react-konva';
24

25
// Enable strict mode for better property validation
26
const StrictModeExample = () => {
27
  React.useEffect(() => {
28
    // Enable strict mode at application startup
29
    useStrictMode(true);
30
    
31
    return () => {
32
      // Disable strict mode on cleanup (optional)
33
      useStrictMode(false);
34
    };
35
  }, []);
36

37
  return (
38
    <Stage width={800} height={600}>
39
      <Layer>
40
        <Rect x={100} y={100} width={100} height={100} fill="red" />
41
      </Layer>
42
    </Stage>
43
  );
44
};
45

46
// Conditional strict mode based on environment
47
const ConditionalStrictMode = () => {
48
  React.useEffect(() => {
49
    // Enable strict mode only in development
50
    const isDevelopment = process.env.NODE_ENV === 'development';
51
    useStrictMode(isDevelopment);
52
  }, []);
53

54
  return (
55
    <Stage width={800} height={600}>
56
      <Layer>
57
        <Rect x={50} y={50} width={200} height={150} fill="blue" />
58
      </Layer>
59
    </Stage>
60
  );
61
};
62
```
63

64
### React Reconciler Access
65

66
Direct access to the React reconciler instance used by React Konva for advanced use cases and integration with other libraries.
67

68
```typescript { .api }
69
/**
70
 * React reconciler instance for Konva integration
71
 * Provides low-level access to the reconciler for advanced use cases
72
 */
73
var KonvaRenderer: ReactReconciler.Reconciler<any, any, any, any, any, any>;
74
```
75

76
**Usage Examples:**
77

78
```typescript
79
import React from 'react';
80
import { KonvaRenderer } from 'react-konva';
81
import Konva from 'konva';
82

83
// Advanced: Manual container management
84
const ManualContainerExample = () => {
85
  const containerRef = React.useRef(null);
86
  const fiberRootRef = React.useRef(null);
87

88
  React.useEffect(() => {
89
    // Create a Konva stage manually
90
    const stage = new Konva.Stage({
91
      container: containerRef.current,
92
      width: 400,
93
      height: 300
94
    });
95

96
    // Create a reconciler container
97
    fiberRootRef.current = KonvaRenderer.createContainer(
98
      stage,
99
      0, // ConcurrentRoot
100
      null,
101
      false,
102
      null,
103
      '',
104
      console.error,
105
      console.error,
106
      console.error,
107
      null
108
    );
109

110
    // Render React elements into the Konva stage
111
    KonvaRenderer.updateContainer(
112
      React.createElement('Layer', {}, [
113
        React.createElement('Rect', {
114
          key: 'rect',
115
          x: 50,
116
          y: 50,
117
          width: 100,
118
          height: 100,
119
          fill: 'green'
120
        })
121
      ]),
122
      fiberRootRef.current,
123
      null,
124
      () => console.log('Rendered')
125
    );
126

127
    return () => {
128
      // Cleanup
129
      KonvaRenderer.updateContainer(null, fiberRootRef.current, null);
130
      stage.destroy();
131
    };
132
  }, []);
133

134
  return <div ref={containerRef} />;
135
};
136

137
// Integration with external libraries
138
const ExternalLibraryIntegration = () => {
139
  React.useEffect(() => {
140
    // Example: Integrating with a state management library
141
    const unsubscribe = someStateManager.subscribe((state) => {
142
      // Use KonvaRenderer to update canvas based on external state
143
      const elements = state.canvasElements.map(el => 
144
        React.createElement(el.type, { key: el.id, ...el.props })
145
      );
146
      
147
      // Update the reconciler with new elements
148
      // This would typically be done within a proper React component
149
      console.log('External state changed:', elements);
150
    });
151

152
    return unsubscribe;
153
  }, []);
154

155
  return null; // This component doesn't render directly
156
};
157
```
158

159
### Version Information
160

161
Access to the React Konva library version string for debugging and compatibility checks.
162

163
```typescript { .api }
164
/**
165
 * React Konva library version string
166
 * Useful for debugging and compatibility checks
167
 */
168
var version: string;
169
```
170

171
**Usage Examples:**
172

173
```typescript
174
import React from 'react';
175
import { version } from 'react-konva';
176

177
// Display version information
178
const VersionInfo = () => {
179
  React.useEffect(() => {
180
    console.log('React Konva version:', version);
181
    
182
    // Version compatibility check
183
    const [major, minor, patch] = version.split('.').map(Number);
184
    if (major < 18) {
185
      console.warn('This application requires React Konva v18 or higher');
186
    }
187
    
188
    // Feature detection based on version
189
    const hasNewFeatures = major >= 19;
190
    if (hasNewFeatures) {
191
      console.log('New React 19 features are available');
192
    }
193
  }, []);
194

195
  return (
196
    <div style={{ padding: '10px', fontSize: '12px', color: '#666' }}>
197
      React Konva v{version}
198
    </div>
199
  );
200
};
201

202
// Runtime version checks
203
const VersionChecks = () => {
204
  const [versionInfo, setVersionInfo] = React.useState(null);
205

206
  React.useEffect(() => {
207
    // Parse version information
208
    const [major, minor, patch] = version.split('.').map(Number);
209
    
210
    setVersionInfo({
211
      full: version,
212
      major,
213
      minor,
214
      patch,
215
      isSupported: major >= 18,
216
      hasReact19Support: major >= 19
217
    });
218
  }, []);
219

220
  if (!versionInfo) return null;
221

222
  return (
223
    <div>
224
      <h3>Version Information</h3>
225
      <ul>
226
        <li>Version: {versionInfo.full}</li>
227
        <li>Supported: {versionInfo.isSupported ? 'Yes' : 'No'}</li>
228
        <li>React 19 Support: {versionInfo.hasReact19Support ? 'Yes' : 'No'}</li>
229
      </ul>
230
    </div>
231
  );
232
};
233
```
234

235
### Development Tools Integration
236

237
React Konva automatically integrates with React DevTools for debugging and inspection.
238

239
**Usage Examples:**
240

241
```typescript
242
import React from 'react';
243
import { Stage, Layer, Rect } from 'react-konva';
244

245
// Component that can be inspected in React DevTools
246
const DebuggableComponent = () => {
247
  const [rectProps, setRectProps] = React.useState({
248
    x: 100,
249
    y: 100,
250
    width: 100,
251
    height: 100,
252
    fill: 'red'
253
  });
254

255
  // This state will be visible in React DevTools
256
  React.useEffect(() => {
257
    // DevTools will show this component and its state
258
    console.log('Component rendered with props:', rectProps);
259
  }, [rectProps]);
260

261
  const handleClick = () => {
262
    setRectProps(prev => ({
263
      ...prev,
264
      fill: prev.fill === 'red' ? 'blue' : 'red'
265
    }));
266
  };
267

268
  return (
269
    <Stage width={800} height={600}>
270
      <Layer>
271
        <Rect
272
          {...rectProps}
273
          onClick={handleClick}
274
          // These props will be visible in DevTools
275
          name="debuggable-rect"
276
          id="rect-1"
277
        />
278
      </Layer>
279
    </Stage>
280
  );
281
};
282

283
// Performance monitoring
284
const PerformanceMonitored = () => {
285
  React.useEffect(() => {
286
    // Performance marks for debugging
287
    performance.mark('react-konva-render-start');
288
    
289
    return () => {
290
      performance.mark('react-konva-render-end');
291
      performance.measure(
292
        'react-konva-render',
293
        'react-konva-render-start',
294
        'react-konva-render-end'
295
      );
296
    };
297
  });
298

299
  return (
300
    <Stage width={800} height={600}>
301
      <Layer>
302
        <Rect x={50} y={50} width={100} height={100} fill="green" />
303
      </Layer>
304
    </Stage>
305
  );
306
};
307
```
308

309
### Component Ref Utilities
310

311
While not directly exported utilities, React Konva components provide standardized methods for accessing underlying Konva instances.
312

313
```typescript { .api }
314
/**
315
 * Standard methods available on all Konva node component refs
316
 * Provides access to underlying Konva instances
317
 */
318
interface KonvaNodeComponent<Node extends Konva.Node, Props> {
319
  /**
320
   * Get the public Konva node instance
321
   * @returns The underlying Konva node
322
   */
323
  getPublicInstance(): Node;
324
  
325
  /**
326
   * Get the native Konva node instance
327
   * @returns The native Konva node
328
   */
329
  getNativeNode(): Node;
330
}
331
```
332

333
**Usage Examples:**
334

335
```typescript
336
import React, { useRef } from 'react';
337
import { Stage, Layer, Circle } from 'react-konva';
338

339
// Accessing Konva instances through refs
340
const RefUtilityExample = () => {
341
  const circleRef = useRef(null);
342
  const stageRef = useRef(null);
343

344
  const handleButtonClick = () => {
345
    if (circleRef.current) {
346
      // Access the underlying Konva circle
347
      const konvaCircle = circleRef.current;
348
      
349
      // Use Konva methods directly
350
      konvaCircle.to({
351
        scaleX: 2,
352
        scaleY: 2,
353
        duration: 0.5,
354
        onFinish: () => {
355
          konvaCircle.to({
356
            scaleX: 1,
357
            scaleY: 1,
358
            duration: 0.5
359
          });
360
        }
361
      });
362
    }
363
  };
364

365
  const exportImage = () => {
366
    if (stageRef.current) {
367
      // Export stage as image
368
      const dataURL = stageRef.current.toDataURL();
369
      
370
      // Create download link
371
      const link = document.createElement('a');
372
      link.download = 'canvas-export.png';
373
      link.href = dataURL;
374
      link.click();
375
    }
376
  };
377

378
  return (
379
    <div>
380
      <button onClick={handleButtonClick}>Animate Circle</button>
381
      <button onClick={exportImage}>Export Image</button>
382
      
383
      <Stage ref={stageRef} width={800} height={600}>
384
        <Layer>
385
          <Circle
386
            ref={circleRef}
387
            x={200}
388
            y={200}
389
            radius={50}
390
            fill="purple"
391
          />
392
        </Layer>
393
      </Stage>
394
    </div>
395
  );
396
};
397
```