Signify Pad

A flexible React signature pad component supporting draw and type modes with styling, export, and download features.

Features

• Draw mode – Capture signatures on a canvas with configurable pen color and width
• Type mode – Type signatures with multiple script/cursive font options
• Export – Get signature as base64 image or PNG download
• Styling – Customize background color, pencil color, and pencil width
• Optional toggles – Show/hide reset, copy, type, and styling controls via props

Installation

npm install signify-pad

Peer dependencies: This package requires react and react-dom (v18 or v19). Install them if not already present:

npm install react react-dom

Usage

1. Import the component and styles:

import { SignatureDialog } from "signify-pad";
import "signify-pad/styles.css";

2. Render the component:

<SignatureDialog
  reset={true}
  copy={true}
  type={true}
  backgroundColor={true}
  pencilColor={true}
  pencilWidth={true}
  setImageBaseURL={(url) => console.log(url)}
  imageBaseURL={undefined}
  base64String={undefined}
/>

Props (SignatureDialogProps)

| Prop | Type | Default | Description | |-------------------|--------------------------|---------|--------------------------------------------------| | reset | boolean | true | Show reset button | | copy | boolean | - | Show copy button | | type | boolean | - | Show type (text) mode toggle | | backgroundColor | boolean | - | Show background color picker | | pencilColor | boolean | - | Show pencil color picker | | pencilWidth | boolean | - | Show pencil width slider | | setImageBaseURL | (url: string) => void | - | Callback when signature image (base64) is set | | imageBaseURL | string | - | Controlled base64 image URL | | base64String | string | - | Controlled base64 string | | style | React.CSSProperties | - | Optional root style override |

TypeScript

For typed props, import the interface:

import { SignatureDialog, type SignatureDialogProps } from "signify-pad";

const props: SignatureDialogProps = {
  reset: true,
  copy: true,
  type: true,
};
<SignatureDialog {...props} />;

Build

npm run build

Output: dist/index.js (ES module), dist/index.css, and dist/*.d.ts (TypeScript declarations).

License

MIT