@siamf/react-signature-pad v1.0.8

@siamf/react-signature-pad

A react wrapper component for signature pad integration into react with typescript and latest version of signature pad. It supports all kind of essentials API and options.

Installation

$ npm i @siamf/react-signature-pad

Usage

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

//SignaturePad Component
<SignaturePad
  canvasProps={{ width: 600, height: 300 }}
/>

How to use API?

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

const MyComponent = () => {
    const ref = useRef<SignatureCanvasRef>(null);

    const getDataUrl = () => {
        if (ref.current) {
            const dataUrl = ref.current.toDataURL();
            console.log('Signature as PNG:', dataUrl);
        }
    };

    //You can use All API by calling ref object;

    return (
        <div>
          <SignaturePad
            canvasProps={{ width: 600, height: 300 }}
            ref={ref}
          />
          <button onClick={getDataUrl}>
            Download Signature
          </button>
        </div>
    )
}

export default MyComponent;

Props

API Method

Stay in touch

• Author - Siam Ahnaf
• Website - https://www.siamahnaf.com/
• Github - https://github.com/siamahnaf