A lightweight, customizable signature pad component for React, built with TypeScript. Capture user signatures, save them as images, clear the pad, and optionally download them in jpeg and png formats. Good for e-signatures applications.
npm install signature-pad-package
bash
pnpm install signature-pad-package
`
Usage
Import the component into your React project and use it as follows:
$3
`tsx
import React, { useState } from 'react';
import SignaturePad from 'signature-pad-package';
const App: React.FC = () => {
const [signature, setSignature] = useState(null);
const handleSave = (dataURL: string) => {
setSignature(dataURL); // Save the signature
};
return (
React Signature Pad
width={500}
height={300}
onSave={handleSave}
download={true}
downloadFilename="my-signature"
downloadFormat="image/png"
/>
{signature && (
Your Signature:
)}
);
};
export default App;
`
$3
`tsx
import React, { useState } from 'react';
import SignaturePad from 'signature-pad-package';
const App: React.FC = () => {
const [signature, setSignature] = useState(null);
const handleSave = (dataURL: string) => {
setSignature(dataURL); // Save the signature
};
return (
Advanced React Signature Pad
width={400}
height={200}
theme={dark}
onSave={handleSave} // Custom handler to save the signature
downloadFormat="image/jpeg" // Specify download format
onDownload={() => console.log("Downloaded")} // Callback for download
onClear={() => console.log("Cleared")} // Callback for clearing the canvas
download={true} // Enable download button
padStyles={{
border: "1px solid #ccc",
borderRadius: "10px",
}} // Custom styling for the signature pad
iconColor={{
clear: "red",
save: "green",
download: "blue",
}} // Custom icon colors for actions
/>
);
};
export default App;
`
$3
| Prop | Type | Default | Description |
| ------------------- | ----------------- | --------------- | --------------------------------------------------------------------------- |
| width | number | 500 | Width of the canvas (in pixels). |
| height | number | 300 | Height of the canvas (in pixels). |
| theme | 'dark' \| 'light' | 'light' | Theme for the signature pad. | |
| onSave | function(dataURL: string) | undefined | Callback that fires when the signature is copied (similar to onSave). |
| onDownload | function() | undefined | Callback that triggers when the signature is downloaded. |
| onClear | function() | undefined | Callback that triggers when the signature pad is cleared. |
| download | boolean | false | Enables a download button to download the signature image. |
| downloadFilename | string | 'signature' | Default filename when downloading the signature. |
| downloadFormat | 'image/png' \| 'image/jpeg' | 'image/png' | Format of the downloaded image (PNG or JPEG). |
| padStyles | object | undefined | Custom styles for the signature pad (e.g., border, border radius). |
| iconColor | object | undefined | Customize the colors of the action icons (clear, save, download). |
Development
If you want to contribute or make changes to the package:
1. Clone the repository:
`bash
git clone https://github.com/unnikpanicker/react-signature-pad.git
`
2. Install dependencies:
`bash
pnpm install
`
3. Run the development server:
`bash
pnpm run dev
`
4. Build the package:
`bash
pnpm run build
`
5. Test the package locally using a linked project:
`bash
pnpm link
``