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} />

danielrearden/react-another-signature-pad

Yet Another React Signature Pad

Installation

Usage

Properties

Capturing canvas data