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

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