@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

Name	Types	Description
dotSize	number	Radius of a single dot. Also the width of the start of a mark.
minWidth	number	Minimum width of a line. Defaults to 0.5.
maxWidth	number	Maximum width of a line. Defaults to 2.5.
throttle	number	Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
minDistance	number	Add the next point only if the previous one is farther than x pixels. Defaults to 5.
backgroundColor	string	Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
penColor	string	Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
velocityFilterWeight	number	Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
canvasContextOptions	CanvasRenderingContext2DSettings	Part of the Canvas API, provides the 2D rendering context for the drawing surface of a canvas element. It is used for drawing shapes, text, images, and other objects
canvasProps	HTMLCanvasElement	Direct canvas html element props
clearOnResize	boolean	Whether or not the canvas should be cleared when the window resizes

API Method

Name	Types	Default
clear()	() => void	Clear canvas element
isEmpty()	() => boolean	Whether canvas empty or not
toDataURL()	(type?: string, encoderOptions?: number):string	Get signature Data URL
toFile()	(type?: string, encoderOptions?: number):File	Get Signature Image File
toSVG()	(options?: ToSVGOptions)	Get the svg element
fromDataURL()	(dataUrl: string, options?: { ratio?: number; width?: number; height?: number; xOffset?: number; yOffset?: number }) => Promise	Writes a base64 image to canvas
toData()	() => PointGroup[]	Returns signature image as an array of point groups
fromData()	(pointGroups: PointGroup[], options?: { clear?: boolean }) => void	Draws signature image from an array of point groups
getCanvas()	() => HTMLCanvasElement	Get HTML Canvas Element
getSignaturePad()	() => SignaturePad	Get the whole Signature Pas Instance
on()	() => void;	Rebinds all event handlers
off()	() => void;	Unbinds all event handlers

Stay in touch

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