{"id":11860,"library":"react-sketch-canvas","title":"React Sketch Canvas","description":"react-sketch-canvas is a React component designed for freehand vector drawing, leveraging SVG as its rendering canvas. It provides a declarative interface for integrating drawing capabilities into React applications, supporting actions like drawing, erasing, undoing, and redoing strokes. The library allows for customization of stroke properties and offers functionality to export the drawn content as SVG paths or various image formats (PNG, JPEG). The current stable version is 6.2.0, with active development on a 7.0.0-next branch, indicating ongoing maintenance and feature additions. Its primary differentiators include its SVG-based output, which ensures resolution independence, a straightforward React component API, and built-in essential drawing features without relying on pixel-based HTML Canvas APIs.","status":"active","version":"6.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/vinothpandian/react-sketch-canvas","tags":["javascript","react-component","sketch","canvas","drawing","freehand","vector","svg-canvas","react-sketch","typescript"],"install":[{"cmd":"npm install react-sketch-canvas","lang":"bash","label":"npm"},{"cmd":"yarn add react-sketch-canvas","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-sketch-canvas","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any React component.","package":"react","optional":false}],"imports":[{"note":"The primary component is a named export. Attempting a default import or CommonJS `require` without destructuring will result in an error.","wrong":"import ReactSketchCanvas from 'react-sketch-canvas';\nconst ReactSketchCanvas = require('react-sketch-canvas');","symbol":"ReactSketchCanvas","correct":"import { ReactSketchCanvas } from 'react-sketch-canvas';"},{"note":"Type import for individual drawing paths. Useful when working with `paths` prop or returned values from methods like `getPaths`.","symbol":"CanvasPath","correct":"import type { CanvasPath } from 'react-sketch-canvas';"},{"note":"Type import for the ref object used to access imperative methods on the canvas component, such as `clearCanvas` or `exportImage`.","symbol":"ReactSketchCanvasRef","correct":"import type { ReactSketchCanvasRef } from 'react-sketch-canvas';"}],"quickstart":{"code":"import React, { useRef, useState } from 'react';\nimport { ReactSketchCanvas, ReactSketchCanvasRef } from 'react-sketch-canvas';\n\nconst DrawingApp: React.FC = () => {\n const canvasRef = useRef(null);\n const [strokeColor, setStrokeColor] = useState('#000000');\n const [strokeWidth, setStrokeWidth] = useState(4);\n\n const handleClear = () => {\n if (canvasRef.current) {\n canvasRef.current.clearCanvas();\n }\n };\n\n const handleUndo = () => {\n if (canvasRef.current) {\n canvasRef.current.undo();\n }\n };\n\n const handleRedo = () => {\n if (canvasRef.current) {\n canvasRef.current.redo();\n }\n };\n\n const handleExport = async () => {\n if (canvasRef.current) {\n const image = await canvasRef.current.exportImage('png');\n // For demonstration, log the base64 image or trigger a download\n console.log('Exported PNG (base64):', image);\n // To trigger a download:\n // const a = document.createElement('a');\n // a.href = image;\n // a.download = 'sketch.png';\n // document.body.appendChild(a);\n // a.click();\n // document.body.removeChild(a);\n }\n };\n\n return (\n
\n

My Sketchpad

\n
\n \n setStrokeColor(e.target.value)}\n />\n \n setStrokeWidth(Number(e.target.value))}\n />\n
\n \n
\n \n \n \n \n
\n
\n );\n};\n\nexport default DrawingApp;","lang":"typescript","description":"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."},"warnings":[{"fix":"Refer to the official 7.0.0 changelog upon its stable release for specific migration steps. Test your application thoroughly before deploying.","message":"Version 7.0.0 is under active development (as of next releases). While not yet stable, it introduces new features and potential API changes. Users should review the changelog carefully before upgrading to the stable 7.x release to identify any breaking changes.","severity":"breaking","affected_versions":">=7.0.0-next.0"},{"fix":"Upgrade to version 6.1.1 or higher to ensure release builds are free of unnecessary instrumentation.","message":"Older versions (pre-6.1.1) might have included coverage instrumentation in their release builds, potentially leading to increased bundle size or minor performance overhead. This was resolved in version 6.1.1.","severity":"gotcha","affected_versions":"<6.1.1"},{"fix":"Configure your Content Security Policy to allow `style-src 'unsafe-inline'` if you encounter styling issues or errors related to inline styles. Alternatively, investigate if `nonce` or hash-based CSP is feasible with the library's output.","message":"When using `ReactSketchCanvas` in environments with strict CSP (Content Security Policy) rules, ensure that `style-src 'unsafe-inline'` is permitted, as the component uses inline styles for certain SVG elements.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import ReactSketchCanvas from 'react-sketch-canvas';` to `import { ReactSketchCanvas } from 'react-sketch-canvas';`","cause":"Attempting to import `ReactSketchCanvas` as a default import when it is a named export.","error":"TypeError: (0 , react_sketch_canvas__WEBPACK_IMPORTED_MODULE_2__.ReactSketchCanvas) is not a function"},{"fix":"Verify 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).","cause":"Incorrect import of `ReactSketchCanvas` or React environment issues (e.g., mismatched React versions or incorrect setup).","error":"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`."},{"fix":"Ensure 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.","cause":"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.","error":"Canvas appears blank or with unexpected white space, despite being rendered."},{"fix":"If you are iterating over an array to render multiple `ReactSketchCanvas` components, ensure each instance receives a unique `key` prop, e.g., ``.","cause":"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.","error":"Warning: Each child in a list should have a unique 'key' prop."}],"ecosystem":"npm"}