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

``bash
npm install signify-pad
`

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

`bash
npm install react react-dom
`

Usage

1. Import the component and styles:

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

2. Render the component:

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

$3

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

$3

For typed props, import the interface:

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

const props: SignatureDialogProps = {
reset: true,
copy: true,
type: true,
};
;
`

Build

`bash
npm run build
`

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

License

MIT