```markdown
# 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"`.

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