react-digital-signature

React Digital Signature

A React signature component using signature_pad and based on other libraries of the same functionality.

Installation

You can install the latest release using npm:

npm install --save react-digital-signature

or Yarn:

yarn add react-digital-signature

Usage TS

import { useRef } from 'react'
import './App.css'
import DigitalSignature, { SignaturePad } from 'react-digital-signature'

function App() {

  const ref = useRef<SignaturePad>()
  const handleCLear = () =>{
    ref.current?.clear()
  }
  return (
    <div className="App">
      <button onClick={handleCLear}>Clear</button>
        <br />
        <br />
      <DigitalSignature 
        signaturePadRef={ref}
        canvasProps={{
          style:{
            background:"white",
            border:"1px solid black"
          }
        }}
      />
    </div>
  )
}
export default App

Usage JS

import { useRef } from 'react'
import './App.css'
import DigitalSignature from 'react-digital-signature'

function App() {

  const ref = useRef()
  const handleCLear = () =>{
    ref.current?.clear()
  }
  return (
    <div className="App">
      <button onClick={handleCLear}>Clear</button>
        <br />
        <br />
      <DigitalSignature 
        signaturePadRef={ref}
        canvasProps={{
          style:{
            background:"white",
            border:"1px solid black"
          }
        }}
      />
    </div>
  )
}
export default App

Props <DigitalSignature />

Prop	Type	Default Value	Description
velocityFilterWeight	number	0.7	Controls the weight/impact of velocity on the pen stroke.
minWidth	number	0.5	Minimum width of the pen stroke.
maxWidth	number	2.5	Maximum width of the pen stroke.
minDistance	number	5	Minimum distance between two points to be considered as a valid stroke.
dotSize	number or function	() => (min + max)/2	The size of the dot that is placed at the beginning and end of each stroke.
penColor	string	'black'	Color of the pen stroke.
throttle	number	16	The time in milliseconds between each mouse/touchmove event that is considered as a new stroke.
onEnd	function		A callback function that is called when a stroke ends.
onBegin	function		A callback function that is called when a stroke begins.
canvasProps	object		Props that are directly passed to the underlying <canvas /> element.
backgroundColor	string	"rgba(0,0,0,0)"	Background color of the canvas element.
eraseOnResize	bool	true	Whether or not the canvas should be cleared when the window resizes (Usually used on ios devices and browser with bottom navigation bar variable).

Note: All props, except for canvasProps and eraseOnResize, are passed through to signature_pad as its options. If you want know more of the props of the component you can check the original docs

API

• refDigitalPad.toDataURL(); Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)

• refDigitalPad.toDataURL("image/jpeg"); save image as PNG

• refDigitalPad.toDataURL("image/jpeg", 0.5); save image as JPEG with 0.5 image quality

• refDigitalPad.toDataURL("image/svg+xml"); save image as SVG data url

• refDigitalPad.toSVG(); Return svg string without converting to base64

• refDigitalPad.toSVG({includeBackgroundColor: true}); add background color to svg output

• refDigitalPad.fromDataURL("data:image/png;base64,iVBORw0K..."); Draws signature image from data URL (mostly uses https://mdn.io/drawImage under-the-hood)

• refDigitalPad.fromDataURL("data:image/png;base64,iVBORw0K...", { ratio: 1, width: 400, height: 200, xOffset: 100, yOffset: 50 }); Draws signature image from data URL and alters it with the given options

• const data = refDigitalPad.toData(); Returns signature image as an array of point groups

• refDigitalPad.fromData(data); Draws signature image from an array of point groups

• refDigitalPad.fromData(data, { clear: false }); Draws signature image from an array of point groups, without clearing your existing image (clear defaults to true if not provided)

• refDigitalPad.clear(); Clears the canvas

• refDigitalPad.isEmpty(); Returns true if canvas is empty, otherwise returns false

• refDigitalPad.off(); Unbinds all event handlers

• refDigitalPad.on(); Rebinds all event handlers

You can use the API using a useRef() hook for example:

function App() {
  const refDigitalPad = useRef()
  const handleCLear = () =>{
    refDigitalPad.current?.clear()
  }
  return (
    <div className="App">
      <button onClick={handleCLear}>Clear</button>
        <br />
        <br />
      <DigitalSignature 
        signaturePadRef={refDigitalPad}
        canvasProps={{
          style:{
            background:"white",
            border:"1px solid black"
          }
        }}
      />
    </div>
  )
}

Example

If you want execute the example of the project:

cd example && npm install && npm run start

and navigate to http://localhost:1234/