0.9.2 • Published 7 years ago
react-another-signature-pad v0.9.2
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} />