react-signature-canvas-component
Version:
A responsive signature canvas component for React and Next.js applications.
173 lines (135 loc) • 6.22 kB
Markdown
```markdown
# React Signature Canvas Component
[](https://www.npmjs.com/package/react-signature-canvas-component)
[](https://opensource.org/licenses/MIT)
A versatile and responsive React component for capturing user signatures on a canvas. Built with modern React hooks and designed for easy integration into web applications, including Next.js projects using the `"use client"` directive.
## ✨ Features
- **Responsive Canvas:** Automatically adjusts to the width of its parent container.
- **Mouse & Touch Support:** Seamless drawing experience across devices.
- **Customizable Stroke:** Adjust signature color and width (pre-defined options).
- **Clear Functionality:** Reset the canvas with a single click.
- **Programmatic Access:** Retrieve signature as a Data URL or Blob, check if the canvas is empty, and clear it using a `ref`.
- **Disabled State:** Easily disable the drawing functionality.
- **Status Indicator:** Provides real-time feedback on signature presence.
- **Next.js Friendly:** Includes the `"use client"` directive for client-side rendering compatibility.
## 📦 Installation
Install the package via npm or yarn:
```bash
npm install react-signature-canvas-component
# or
yarn add react-signature-canvas-component
```
## 🚀 Usage
The `SignatureCanvas` component is a client-side component. If you are using it within a Next.js App Router server component, ensure its parent component is marked with `"use client"`.
```jsx
// components/MySignatureForm.jsx
"use client";
import React, { useRef, useState } from 'react';
import SignatureCanvas from 'react-signature-canvas-component';
export default function MySignatureForm() {
const signatureRef = useRef(null);
const [signatureEmpty, setSignatureEmpty] = useState(true);
const [isDisabled, setIsDisabled] = useState(false);
const handleSaveSignature = () => {
if (signatureRef.current && !signatureRef.current.checkIfEmpty()) {
const dataURL = signatureRef.current.getSignatureData();
console.log("Signature Data URL:", dataURL);
signatureRef.current.getSignatureBlob().then(blob => {
if (blob) console.log("Signature Blob:", blob);
});
} else {
alert("Please draw your signature before saving!");
}
};
const handleClearSignature = () => {
signatureRef.current?.clearCanvas();
};
return (
<div className="p-6 max-w-md mx-auto bg-white rounded-xl shadow-md space-y-4">
<h1 className="text-2xl font-bold text-gray-800">Sign Below</h1>
<SignatureCanvas
ref={signatureRef}
onSignatureChange={setSignatureEmpty}
disabled={isDisabled}
/>
<div className="flex justify-between items-center mt-4">
<button
onClick={handleSaveSignature}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
disabled={signatureEmpty || isDisabled}
>
Save Signature
</button>
<button
onClick={handleClearSignature}
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
disabled={signatureEmpty || isDisabled}
>
Clear
</button>
<button
onClick={() => setIsDisabled(!isDisabled)}
className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600"
>
{isDisabled ? "Enable" : "Disable"}
</button>
</div>
<p className="text-sm text-gray-600 mt-2">
Status: {signatureEmpty ? "Canvas is empty" : "Signature present"}
</p>
</div>
);
}
```
## 💅 Styling with Tailwind CSS
Ensure Tailwind CSS is configured to scan the component's classes in your `tailwind.config.js`:
```javascript
// tailwind.config.js
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/react-signature-canvas-component/dist/**/*.js',
],
// ... rest of the config
};
```
## 📖 API Reference
### Props
| Prop Name | Type | Default | Description |
|---------------------|----------------------------|----------|-----------------------------------------------------------------------------|
| `onSignatureChange` | `(isEmpty: boolean) => void` | `undefined` | Callback when signature status changes. |
| `disabled` | `boolean` | `false` | Disables drawing and clears the canvas if `true`. |
### Ref Methods
Access methods via a ref:
```jsx
const signatureRef = useRef(null);
// Example:
signatureRef.current.getSignatureData();
```
| Method Name | Returns | Description |
|----------------------|-----------------------|--------------------------------------------------|
| `getSignatureData()` | `string \| null` | Returns signature as Data URL (base64 PNG). |
| `getSignatureBlob()` | `Promise<Blob \| null>` | Returns signature as Blob (PNG image). |
| `checkIfEmpty()` | `boolean` | Checks if the canvas is empty. |
| `clearCanvas()` | `void` | Clears all drawings from the canvas. |
## 🤝 Contributing
Contributions are welcome! Set up locally:
1. Clone the repo:
```bash
git clone https://github.com/yourusername/react-signature-canvas.git
cd react-signature-canvas
```
2. Install dependencies:
```bash
npm install
```
3. Build the package:
```bash
npm run build
```
Use `npm link` for local development with a consuming project.
## 📄 License
MIT License - see [LICENSE](LICENSE) for details.
```