react-minimal-signature


A minimal and easy to use Signature Pad component for React applications, requires React version 18 or above.

> Under the hood it utilizes Ark UI, a headless UI component library.

Features

- 🚀 Easy to use and integrate
- 🎨 Fully customizable
- 🔧 TypeScript support

Demo

Live Demo

Installation

To install the library, you can use npm, yarn or any other package manager:

``bash


npm

npm install react-minimal-signature

yarn

yarn add react-minimal-signature
`

Usage

$3

`tsx
import { ReactMinimalSignature } from "react-minimal-signature";
// Import required styles
import "react-minimal-signature/rmc.css";

function App() {
return ;
}

export default App;
`

$3

`tsx
import { useState } from "react";
import { ReactMinimalSignature } from "react-minimal-signature";
import "react-minimal-signature/rmc.css";

function App() {
const [imageUrl, setImageUrl] = useState("");
const [drawing, setDrawing] = useState(false);
return (
<>
onDraw={() => setDrawing(true)}
onDrawEnd={(details) => {
setDrawing(false);
details.getDataUrl("image/png").then((url) => setImageUrl(url));
}}
/>

{drawing && Drawing...}
{imageUrl && }

);
}

export default App;
`

API Reference

| Prop | Type | Default | Description |
| ------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------ |
| label | string | | Visible label for the Signature Pad |
| withClearTrigger | boolean | true | Boolean to handle the visibility of Clear trigger/button |
| withGuide | boolean | true | Boolean to handle the visibility of guide line |
| onDraw | (details: DrawDetails) => void | | Callback when the signature pad is drawing. |
| onDrawEnd | (details: DrawEndDetails) => void | | Callback when the signature pad is done drawing. |
| getRootNode | () => ShadowRoot \| Node \| Document | | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| drawing | DrawingOptions | { size: 2, simulatePressure: true } | The drawing options. |
| disabled | boolean | | Whether the signature pad is disabled. |
| classNames | {root?: string; label?: string; control?: string; clearTrigger?: string; guide?: string;} | {}` | Add custom classnames to respective DOM nodes. |

Contributing

Any improvements or suggestions are welcome. Feel free to open an issue or submit a pull request.

License

ISC