Registry / web-framework / react-signature-canvas

react-signature-canvas

library1.1.0-alpha.2jsnpmunverified

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.

web-framework

npm install react-signature-canvas

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SIGNATURE-CA

react-signature-canvas

web-frameworkjavascriptv1.1.0-alpha.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SignatureCanvas

✓ import SignatureCanvas from 'react-signature-canvas';

✗ import { SignatureCanvas } from 'react-signature-canvas';

This component is exported as a default export, not a named one.

SignatureCanvas

✓ import SignatureCanvas from 'react-signature-canvas';

✗ const SignatureCanvas = require('react-signature-canvas');

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.

No @types package needed

✓ import SignatureCanvas from 'react-signature-canvas';

✗ import SignatureCanvas from 'react-signature-canvas'; import '@types/react-signature-canvas';

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.

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.

import React, { useRef, useEffect } from 'react'; import { createRoot } from 'react-dom/client'; import SignatureCanvas from 'react-signature-canvas'; const App = () => { const sigCanvas = useRef(null); useEffect(() => { if (sigCanvas.current) { sigCanvas.current.clear(); // Clear the canvas on mount or some condition } }, []); const handleClear = () => { sigCanvas.current.clear(); }; const handleSave = () => { // Get data URL or other signature data if (!sigCanvas.current.isEmpty()) { console.log(sigCanvas.current.toDataURL()); } }; return ( <div> <h1>Draw Your Signature</h1> <SignatureCanvas ref={sigCanvas} penColor='green' canvasProps={{ width: 500, height: 200, className: 'sigCanvas', style: { border: '1px solid black' } }} onEnd={() => console.log('Stroke ended')} onBegin={() => console.log('Stroke began')} /> <div> <button onClick={handleClear}>Clear</button> <button onClick={handleSave}>Save Signature</button> </div> </div> ); }; createRoot(document.getElementById('my-react-container')).render(<App />);

Debug

Known issues

breakingThe 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.

fix

Uninstall `@types/react-signature-canvas` from your project dependencies.

affects: >=1.1.0-alpha.1

gotchaProjects 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`.

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.

affects: 1.1.0-alpha.1

gotchaOlder 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.

fix

Upgrade to `react-signature-canvas@1.0.7` or the latest stable version to ensure full compatibility with modern React versions.

affects: <1.0.7

gotchaThe `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.

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.

affects: <0.3.1

Errors

Common errors & fixes

TS2307: Cannot find module 'react-signature-canvas' or its corresponding type declarations.

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.

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`).

Uncaught TypeError: sigCanvas.current.clear is not a function

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.

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.

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.

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.

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;`.

Upgrade

Version history

1.1.0-alpha.2latest on npm

Audit

Dependencies

reactrequiredCore React library for component rendering.

react-domrequiredRequired for rendering React components to the DOM.

@types/reactoptionalTypeScript type definitions for React. Peer dependency, essential for TypeScript projects.

prop-typesoptionalRuntime type checking for React props, primarily for older React versions or JavaScript projects.

@types/prop-typesoptionalTypeScript type definitions for prop-types. Peer dependency for TypeScript projects using prop-types.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/agilgur5/react-signature-canvas ↗

packagehttps://www.npmjs.com/package/react-signature-canvas ↗