React Signature Canvas

Common errors

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

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

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

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

Warnings

• breaking 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.
  Fix: Uninstall `@types/react-signature-canvas` from your project dependencies.
• gotcha 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`.
  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.
• gotcha 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.
  Fix: Upgrade to `react-signature-canvas@1.0.7` or the latest stable version to ensure full compatibility with modern React versions.
• gotcha 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.
  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.

Install

• npm install react-signature-canvas npm
• yarn add react-signature-canvas yarn
• pnpm add react-signature-canvas pnpm

Imports

• SignatureCanvas
  wrong:

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

  correct:

  import SignatureCanvas from 'react-signature-canvas';

  This component is exported as a default export, not a named one.
• SignatureCanvas
  wrong:

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

  correct:

  import SignatureCanvas from '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
  wrong:

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

  correct:

  import SignatureCanvas from '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.

Quickstart

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 />);