React Signature Pad

A signature pad implementation for react.

Basic Usage

``javascript
var React = require('react');
var SignaturePad = require('react-signature-pad');

React.render(
,
document.body
)
`

Methods

`javascript

...

var signature = this.refs.mySignature;

// Methods

// ===============================================
// isEmpty() - returns boolean
// ===============================================

signature.isEmpty();

// ===============================================
// clear() - clears canvas
// ===============================================

signature.clear();

// ===============================================
// toDataURL() - retrieves image as a data url
// ===============================================

signature.toDataURL();

// ===============================================
// fromDataURL() - writes a base64 image to canvas
// ===============================================

signature.fromDataURL(base64String);

`

$3

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.

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.

onClear

(function) Callback when on clear button click.

CSS

In order to make the signature pad work correctly you will need the css as well. All the relevant styles are in this file.

Example

`bash
$ npm start
``
Then navigate to http://localhost:8080/ in your browser and you should be able to see the signature pad in action.