Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
ReactSketchCanvas
✓ import { ReactSketchCanvas } from 'react-sketch-canvas';
✗ import ReactSketchCanvas from 'react-sketch-canvas';
const ReactSketchCanvas = require('react-sketch-canvas');
The primary component is a named export. Attempting a default import or CommonJS `require` without destructuring will result in an error.
CanvasPath
✓ import type { CanvasPath } from 'react-sketch-canvas';
Type import for individual drawing paths. Useful when working with `paths` prop or returned values from methods like `getPaths`.
ReactSketchCanvasRef
✓ import type { ReactSketchCanvasRef } from 'react-sketch-canvas';
Type import for the ref object used to access imperative methods on the canvas component, such as `clearCanvas` or `exportImage`.
This quickstart demonstrates a functional React component using `react-sketch-canvas`. It includes basic drawing, dynamically changing stroke color and width, and imperative controls for clearing, undoing, redoing, and exporting the canvas content as a PNG image.
import React, { useRef, useState } from 'react';
import { ReactSketchCanvas, ReactSketchCanvasRef } from 'react-sketch-canvas';
const DrawingApp: React.FC = () => {
const canvasRef = useRef<ReactSketchCanvasRef>(null);
const [strokeColor, setStrokeColor] = useState('#000000');
const [strokeWidth, setStrokeWidth] = useState(4);
const handleClear = () => {
if (canvasRef.current) {
canvasRef.current.clearCanvas();
}
};
const handleUndo = () => {
if (canvasRef.current) {
canvasRef.current.undo();
}
};
const handleRedo = () => {
if (canvasRef.current) {
canvasRef.current.redo();
}
};
const handleExport = async () => {
if (canvasRef.current) {
const image = await canvasRef.current.exportImage('png');
// For demonstration, log the base64 image or trigger a download
console.log('Exported PNG (base64):', image);
// To trigger a download:
// const a = document.createElement('a');
// a.href = image;
// a.download = 'sketch.png';
// document.body.appendChild(a);
// a.click();
// document.body.removeChild(a);
}
};
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<h1>My Sketchpad</h1>
<div style={{ marginBottom: '10px' }}>
<label htmlFor="strokeColor">Color: </label>
<input
id="strokeColor"
type="color"
value={strokeColor}
onChange={(e) => setStrokeColor(e.target.value)}
/>
<label htmlFor="strokeWidth" style={{ marginLeft: '15px' }}>Width: </label>
<input
id="strokeWidth"
type="range"
min="1"
max="20"
value={strokeWidth}
onChange={(e) => setStrokeWidth(Number(e.target.value))}
/>
</div>
<ReactSketchCanvas
ref={canvasRef}
strokeWidth={strokeWidth}
strokeColor={strokeColor}
canvasColor="#FFFFFF"
width="600px"
height="400px"
style={{ border: '1px solid #ccc', borderRadius: '5px' }}
/>
<div style={{ marginTop: '10px' }}>
<button onClick={handleClear} style={{ marginRight: '5px' }}>Clear</button>
<button onClick={handleUndo} style={{ marginRight: '5px' }}>Undo</button>
<button onClick={handleRedo} style={{ marginRight: '5px' }}>Redo</button>
<button onClick={handleExport}>Export PNG</button>
</div>
</div>
);
};
export default DrawingApp;
Errors
Common errors & fixes
TypeError: (0 , react_sketch_canvas__WEBPACK_IMPORTED_MODULE_2__.ReactSketchCanvas) is not a function
Attempting to import `ReactSketchCanvas` as a default import when it is a named export.
fixChange your import statement from `import ReactSketchCanvas from 'react-sketch-canvas';` to `import { ReactSketchCanvas } from 'react-sketch-canvas';` Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)...Check the render method of `YourComponent`.
Incorrect import of `ReactSketchCanvas` or React environment issues (e.g., mismatched React versions or incorrect setup).
fixVerify that `import { ReactSketchCanvas } from 'react-sketch-canvas';` is correct. Ensure your React and ReactDOM versions are compatible and meet the peer dependency requirement (>=16.8). Canvas appears blank or with unexpected white space, despite being rendered.
This could be due to CSS conflicting with the canvas or, in older versions, specific rendering bugs (e.g., #103 fixed in `7.0.0-next.2`). Also check container dimensions.
fixEnsure the `ReactSketchCanvas` component and its parent containers have explicit `width` and `height` CSS properties. If using an older version, consider upgrading to at least `6.2.0` or `7.0.0-next.2` if the issue persists.
Warning: Each child in a list should have a unique 'key' prop.
While `react-sketch-canvas` handles internal rendering, if you are attempting to map or render multiple instances of `ReactSketchCanvas` or its internal path data, React requires a unique `key` prop for each item in a list.
fixIf you are iterating over an array to render multiple `ReactSketchCanvas` components, ensure each instance receives a unique `key` prop, e.g., `<ReactSketchCanvas key={item.id} ... />`. Audit
Dependencies
reactrequiredPeer dependency required for any React component.