# React Signature Canvas Component

[![npm version](https://img.shields.io/npm/v/react-signature-canvas-component?style=flat-square)](https://www.npmjs.com/package/react-signature-canvas-component)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](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".

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

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

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:

   git clone https://github.com/yourusername/react-signature-canvas.git
   cd react-signature-canvas

2. Install dependencies:

   npm install

3. Build the package:

   npm run build

Use npm link for local development with a consuming project.

📄 License

MIT License - see LICENSE for details.