@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

Name	Types	Description
className	string	Optional - Main container classname
style	CSSProperties	Optional - Main container style API
canvasClassName	string	Optional - Canvas class name
canvasStyle	CSSProperties	Optional - Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
canvasProps	HTMLCanvasElement	Optional - Canvas html element props
previewClassName	string	Optional - Preview signature class
previewStyle	CSSProperties	Optional - Preview signature styles
imgProps	HTMLImageElement	Optional - Preview Image Props
width	number	Optional - Canvas width
height	number	Optional - Canvas Height
fitToContainer	boolean	Optional - Fit canvas to parent width and height
disabled	boolean	Optional - Disable canvas drawing
readOnly	boolean	Optional - Readonly Canvas
penColor	string	Optional - Pen color for drawing lines
backgroundColor	string	Optional - Canvas Background color
strokeWidth	number	Optional - Stroke width line, default is 3
value	string | null	Optional - A value props to show as image as default value
exportType	"image/png" | "image/jpeg" | "image/webp"	Optional - Export file type
exportQuality	number	Optional - Export file(Image) quality
fileName	string	Optional - Exported file name
exportBackground	"transparent" | "canvas"	Optional - Export file background type
exportBackgroundColor	string	Optional - Export file background color when type is "canvas"
onBegin	()=> void	Optional - Callback when drawing start
onEnd	(payload: EndPayload | null) => void	Optional - Callback when drawing end. EndPayload can provide url or dataUrl
onChange	(hasContent: boolean) => void;	Optional - Callback when get changed with hasContent
pencilCursor	boolean	Optional - Show custom pencil cursor type
cursorHotspot	{ x: number; y: number }	Optional - For cursor position on writing hotspot point
cursorSvg	string	Optional - Cursor svg for showing custom cursor
toolBar	boolean	Optional - Show toolbar
colors	string[]	Optional - Colors array for toolbars
toolbarClassName	string	Optional - Toolbar class
toolbarStyle	CSSProperties	Optional - Toolbar styles
showUndo	boolean	Optional - Show/Hide undo button
showRedo	boolean	Optional - Show/Hide redo button
showClear	boolean	Optional - Show/Hide clear button
editLabel	string	Optional - Edit button label
cancelLabel	string	Optional - Cancel button label
renderToolbar	(api: ToolbarTypes)=> ReactNode	Optional - Render your own toolbar
renderPreview	(api: PreviewTypes)=> ReactNode	Optional - Render your own preview container

API for ToolbarTypes

You find all following options on renderToolbar props

Name	Types	Description
color	string	Current color
canUndo	boolean	Can undo
canRedo	boolean	Can redo
clear()	()=> void	Callback for clearing drawings
undo()	()=> void	Callback for undo drawings
redo()	()=> void	Callback for redo drawings
cancel()	()=> void	Callback for cancel drawing canvas and render value image again
hasContent	boolean	Has hasContent or not

API for PreviewTypes

You find all following options on renderPreview props

Name	Types	Description
src	string	Image src
startEdit()	()=> void	Callback for starting drawing/loading canvas
disabled	boolean	Disable/Enable button

API for SignaturePadRef

You will get following options on SignaturePadRef Ref

clear()	()=> void	Callback for clearing drawings
undo()	()=> void	Callback for undo drawings
redo()	()=> void	Callback for redo drawings
cancel()	()=> void	Callback for cancel drawing canvas and render value image again
export()	()=> Promise	Export file/dataURL from export function. See example code
hasContent()	()=> boolean	Is hasContent or not
startEdit()	()=> void	Callback for start edit button
cancelEdit()	()=> void	Callback for cancel canvas

Connect with me