{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-sketch-canvas"],"cli":null},"imports":["import { ReactSketchCanvas } from 'react-sketch-canvas';","import type { CanvasPath } from 'react-sketch-canvas';","import type { ReactSketchCanvasRef } from 'react-sketch-canvas';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useRef, useState } from 'react';\nimport { ReactSketchCanvas, ReactSketchCanvasRef } from 'react-sketch-canvas';\n\nconst DrawingApp: React.FC = () => {\n  const canvasRef = useRef<ReactSketchCanvasRef>(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    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n      <h1>My Sketchpad</h1>\n      <div style={{ marginBottom: '10px' }}>\n        <label htmlFor=\"strokeColor\">Color: </label>\n        <input\n          id=\"strokeColor\"\n          type=\"color\"\n          value={strokeColor}\n          onChange={(e) => setStrokeColor(e.target.value)}\n        />\n        <label htmlFor=\"strokeWidth\" style={{ marginLeft: '15px' }}>Width: </label>\n        <input\n          id=\"strokeWidth\"\n          type=\"range\"\n          min=\"1\"\n          max=\"20\"\n          value={strokeWidth}\n          onChange={(e) => setStrokeWidth(Number(e.target.value))}\n        />\n      </div>\n      <ReactSketchCanvas\n        ref={canvasRef}\n        strokeWidth={strokeWidth}\n        strokeColor={strokeColor}\n        canvasColor=\"#FFFFFF\"\n        width=\"600px\"\n        height=\"400px\"\n        style={{ border: '1px solid #ccc', borderRadius: '5px' }}\n      />\n      <div style={{ marginTop: '10px' }}>\n        <button onClick={handleClear} style={{ marginRight: '5px' }}>Clear</button>\n        <button onClick={handleUndo} style={{ marginRight: '5px' }}>Undo</button>\n        <button onClick={handleRedo} style={{ marginRight: '5px' }}>Redo</button>\n        <button onClick={handleExport}>Export PNG</button>\n      </div>\n    </div>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}