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:

# npm
npm install react-minimal-signature

# yarn
yarn add react-minimal-signature

Usage

Simple

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

function App() {
  return <ReactMinimalSignature label="Sign here" />;
}

export default App;

Render image preview

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<Boolean>(false);
  return (
    <>
      <ReactMinimalSignature
        onDraw={() => setDrawing(true)}
        onDrawEnd={(details) => {
          setDrawing(false);
          details.getDataUrl("image/png").then((url) => setImageUrl(url));
        }}
      />

      {drawing && <span>Drawing...</span>}
      {imageUrl && <img src={imageUrl} alt="Signature" />}
    </>
  );
}

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