@siamf/react-signature-pad

A lightweight, dependency-free React signature pad with an essential API and extensive customization.

Demo

Live Demo

Installation

$ npm i @siamf/react-signature-pad

Usage

import { SignaturePad } from "@siamf/react-signature-pad";

//SignaturePad Component
<SignaturePad />

How to use API?

import { SignaturePad, SignaturePadRef } from "@siamf/react-signature-pad";
import { useRef, useState } from "react";

const MyComponent = () => {
    //Get data url or file from ref
    const ref = useRef<SignaturePadRef>(null);
    const getDataOrFile = async () => {
        if (ref.current) {
            const { dataUrl, file } = await ref.current.export();
            console.log('Signature as PNG:', dataUrl);
            //save(file)
        }
    };

    //Save State on Every Changes
    const [file, setFile] = useState<File>();
    //Then use this file from state anywhere

    return (
        <div>
          <SignaturePad
            canvasProps={{ width: 600, height: 300 }}
            ref={ref}
            onEnd={(e)=> setFile(e.file)} //or e.dataUrl
          />
          <button onClick={getDataUrl}>
            Download Signature
          </button>
        </div>
    )
}

export default MyComponent;

Props

API for ToolbarTypes

You find all following options on renderToolbar props

API for PreviewTypes

You find all following options on renderPreview props

API for SignaturePadRef

You will get following options on SignaturePadRef Ref

Connect with me