{"library":"react-signature-canvas","title":"React Signature Canvas","description":"react-signature-canvas is an unopinionated React wrapper component for the `signature_pad` library, enabling users to add drawing and signature capture capabilities to their React applications. The library aims for a lightweight integration, providing a canvas element without imposing additional styling or wrapping elements. The latest stable version is `1.0.7`, which includes support for React 19 in its peer dependencies. Development is ongoing with `1.1.0-alpha.2` as the latest pre-release, which features a native TypeScript rewrite while maintaining backward compatibility for its API surface. The project boasts 100% test coverage, offers a comprehensive API for canvas manipulation, and allows direct passing of props to the underlying HTML canvas element. It distinguishes itself by its commitment to being a thin, highly configurable wrapper, actively maintained with modern web development practices and full TypeScript support.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-signature-canvas"],"cli":null},"imports":["import SignatureCanvas from 'react-signature-canvas';","import SignatureCanvas from 'react-signature-canvas';","import SignatureCanvas from 'react-signature-canvas';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useRef, useEffect } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport SignatureCanvas from 'react-signature-canvas';\n\nconst App = () => {\n  const sigCanvas = useRef(null);\n\n  useEffect(() => {\n    if (sigCanvas.current) {\n      sigCanvas.current.clear(); // Clear the canvas on mount or some condition\n    }\n  }, []);\n\n  const handleClear = () => {\n    sigCanvas.current.clear();\n  };\n\n  const handleSave = () => {\n    // Get data URL or other signature data\n    if (!sigCanvas.current.isEmpty()) {\n      console.log(sigCanvas.current.toDataURL());\n    }\n  };\n\n  return (\n    <div>\n      <h1>Draw Your Signature</h1>\n      <SignatureCanvas\n        ref={sigCanvas}\n        penColor='green'\n        canvasProps={{ width: 500, height: 200, className: 'sigCanvas', style: { border: '1px solid black' } }}\n        onEnd={() => console.log('Stroke ended')}\n        onBegin={() => console.log('Stroke began')}\n      />\n      <div>\n        <button onClick={handleClear}>Clear</button>\n        <button onClick={handleSave}>Save Signature</button>\n      </div>\n    </div>\n  );\n};\n\ncreateRoot(document.getElementById('my-react-container')).render(<App />);","lang":"typescript","description":"This example demonstrates how to render the `SignatureCanvas` component, customize its pen color and canvas properties, and interact with its API methods like `clear()` and `toDataURL()` using React refs.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}