A flexible React signature pad supporting draw and type modes with styling, export, and download features.
npm install signify-padA flexible React signature pad component supporting draw and type modes with styling, export, and download 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
``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
1. Import the component and styles:
`tsx`
import { SignatureDialog } from "signify-pad";
import "signify-pad/styles.css";
2. Render the component:
`tsx`
copy={true}
type={true}
backgroundColor={true}
pencilColor={true}
pencilWidth={true}
setImageBaseURL={(url) => console.log(url)}
imageBaseURL={undefined}
base64String={undefined}
/>
| 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 |
For typed props, import the interface:
`tsx
import { SignatureDialog, type SignatureDialogProps } from "signify-pad";
const props: SignatureDialogProps = {
reset: true,
copy: true,
type: true,
};
`
`bash`
npm run build
Output: dist/index.js (ES module), dist/index.css, and dist/*.d.ts` (TypeScript declarations).
MIT