react-minimal-signature v0.0.6

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

Contributing

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

License

ISC