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:
``

bash

npm install react-another-signature-pad





Usage

 javascript

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



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



...





$3

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.





$3

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:

javascript

handleSignatureChange(data){

  this.setState({ signature: data });

}



Then use it as the

onEnd

 function like this:

javascript

Installation

bash
npm install react-another-signature-pad

Usage

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

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

...

$3

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.

$3

Every time the user finishes drawing on the canvas, the

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

param is set to

. To capture the data, just create a handler like:

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

Then use it as the

function like this:

javascript