react-another-signature-pad

Yet Another React Signature Pad

This is another signature capture component based on Szymon Nowak's fantastic Signature Pad library.

While there's already a lot of great options out there, none of them met my exact needs so I put this together. Here are the main highlights:

• Utilizes ES6 class instead of React.createClass
• A simple wrapper around canvas -- no extra buttons or other elements
• Easy styling by passing either a style object or a class name as props
• Ability to get blob instead of data url
• Ability to automatically trim whitespace from generated signature

Installation

You can install the latest release using npm:

npm install react-another-signature-pad

Usage

import Signature from 'react-another-signature-pad';

const style = { width: 200, height: 100 };

...

<Signature style={style} />

Properties

All the options for customizing Signature Pad are available as props

dotSize

(float or function) Radius of a single dot.

minWidth

(float) Minimum width of a line. Defaults to 0.5.

maxWidth

(float) Maximum width of a line. Defaults to 2.5.

throttle

(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.

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

(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.

onBegin

(function) Callback when stroke begin.

onEnd

(function) Callback when stroke end.

Additionally the following properties are available:

style

(object) Style to pass to the canvas element. Define custom height and width here (default to 100% if not specified).

className

(string) Class name to pass to canvas element

mimeType

(string) File type returned. Defaults to image/png

quality

(float) Quality of image if mimeType is image/jpeg. Defaults to 1.0.

blob

(bool) Set to true to return blob instead of data URL. Defaults to false.

trim

(bool) Set to true to trim whitespace from canvas. Defaults to false.

clear

(int) Every time this prop is set to a new value, the canvas is cleared. For example, you can set the value to Date.now().

onChange

(function) Function called every time the canvas changes. It's passed a single boolean that indicates if the canvas is empty.

Capturing canvas data

Every time the user finishes drawing on the canvas, the onEnd function is called. This function is passed a single parameter. By default, this will be the data URL of the canvas. It will, however, return a Blob of the data instead if the blob param is set to true. To capture the data, just create a handler like:

handleSignatureChange(data){
  this.setState({ signature: data });
}

Then use it as the onEnd function like this:

<Signature onEnd={this.handleSignatureChange} />