{"id":11856,"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.","status":"active","version":"1.1.0-alpha.2","language":"javascript","source_language":"en","source_url":"https://github.com/agilgur5/react-signature-canvas","tags":["javascript","react","react-component","component","signature","sign","e-sign","e-signature","canvas","typescript"],"install":[{"cmd":"npm install react-signature-canvas","lang":"bash","label":"npm"},{"cmd":"yarn add react-signature-canvas","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-signature-canvas","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for component rendering.","package":"react","optional":false},{"reason":"Required for rendering React components to the DOM.","package":"react-dom","optional":false},{"reason":"TypeScript type definitions for React. Peer dependency, essential for TypeScript projects.","package":"@types/react","optional":true},{"reason":"Runtime type checking for React props, primarily for older React versions or JavaScript projects.","package":"prop-types","optional":true},{"reason":"TypeScript type definitions for prop-types. Peer dependency for TypeScript projects using prop-types.","package":"@types/prop-types","optional":true}],"imports":[{"note":"This component is exported as a default export, not a named one.","wrong":"import { SignatureCanvas } from 'react-signature-canvas';","symbol":"SignatureCanvas","correct":"import SignatureCanvas from 'react-signature-canvas';"},{"note":"While CommonJS `require` might work with transpilation, direct ESM import is the recommended and modern approach. The `require` call would typically return an object with a `default` property in an ESM context.","wrong":"const SignatureCanvas = require('react-signature-canvas');","symbol":"SignatureCanvas","correct":"import SignatureCanvas from 'react-signature-canvas';"},{"note":"Since v1.1.0-alpha.1, the library ships with native TypeScript types, rendering the external `@types/react-signature-canvas` package unnecessary and potentially problematic.","wrong":"import SignatureCanvas from 'react-signature-canvas';\nimport '@types/react-signature-canvas';","symbol":"No @types package needed","correct":"import SignatureCanvas from 'react-signature-canvas';"}],"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
\n );\n};\n\ncreateRoot(document.getElementById('my-react-container')).render();","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."},"warnings":[{"fix":"Uninstall `@types/react-signature-canvas` from your project dependencies.","message":"The separate `@types/react-signature-canvas` package is deprecated and should be removed if using versions `>=1.1.0-alpha.1` as native TypeScript support is now included. Keeping it might lead to type conflicts.","severity":"breaking","affected_versions":">=1.1.0-alpha.1"},{"fix":"Upgrade to `react-signature-canvas@1.1.0-alpha.2` or higher. Alternatively, adjust your `tsconfig.json` module resolution settings if an upgrade is not immediately feasible.","message":"Projects using TypeScript 4.7+ with `moduleResolution` set to `node16`, `bundler`, or `nodenext` may encounter module resolution errors if using versions prior to `1.1.0-alpha.2` due to missing `exports.types` in `package.json`.","severity":"gotcha","affected_versions":"1.1.0-alpha.1"},{"fix":"Upgrade to `react-signature-canvas@1.0.7` or the latest stable version to ensure full compatibility with modern React versions.","message":"Older versions of `react-signature-canvas` (prior to `1.0.7`) might not officially support newer React versions (e.g., React 19), potentially leading to peer dependency warnings or unexpected behavior.","severity":"gotcha","affected_versions":"<1.0.7"},{"fix":"Ensure you are on `v0.3.1` (or `v1.0.1` and above) or newer versions. If on an older version, manually handle background re-application on resize events using the component's API.","message":"The `backgroundColor` prop only sets the background color on initialization. If the canvas is resized, the background might not persist correctly in older versions. This was addressed in `v0.3.1` and `v0.2.5` as backports.","severity":"gotcha","affected_versions":"<0.3.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For versions `>=1.1.0-alpha.1`, ensure `@types/react-signature-canvas` is *not* installed. For `1.1.0-alpha.1` with TS 4.7+ and specific `moduleResolution` (node16/bundler/nodenext), upgrade to `1.1.0-alpha.2`. Otherwise, verify `tsconfig.json` `moduleResolution` is set appropriately (e.g., `bundler` or `node`).","cause":"This usually indicates that TypeScript cannot locate the type definitions for the package, either because the package itself doesn't ship them (unlikely for recent versions), the external `@types` package is missing, or `moduleResolution` settings are incompatible.","error":"TS2307: Cannot find module 'react-signature-canvas' or its corresponding type declarations."},{"fix":"Ensure the ref is correctly attached to the `SignatureCanvas` component and that `sigCanvas.current` is not null or undefined before attempting to call its methods. Always check `sigCanvas.current` for truthiness and confirm the method's existence.","cause":"The ref `sigCanvas.current` might not yet be assigned to the `SignatureCanvas` instance, or you are trying to call a method that does not exist on the component's public API.","error":"Uncaught TypeError: sigCanvas.current.clear is not a function"},{"fix":"Change your import statement to `import SignatureCanvas from 'react-signature-canvas';` for ESM, or if using CommonJS `const SignatureCanvas = require('react-signature-canvas').default;`.","cause":"Attempting to import `SignatureCanvas` as a named import when it is a default export, or a CommonJS `require` call is incorrectly accessing the default export.","error":"Warning: 'SignatureCanvas' is not a function. This usually means you misspelled the component name or forgot to export it from the file it's defined in."}],"ecosystem":"npm"}