https://github.com/blackjk3/react-signature-pad
A signature pad implementation for react.
https://github.com/blackjk3/react-signature-pad
Last synced: 25 days ago
JSON representation
A signature pad implementation for react.
- Host: GitHub
- URL: https://github.com/blackjk3/react-signature-pad
- Owner: blackjk3
- Created: 2015-07-06T20:17:22.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-08-22T09:55:20.000Z (over 1 year ago)
- Last Synced: 2024-10-28T09:52:16.986Z (6 months ago)
- Language: JavaScript
- Size: 30.3 KB
- Stars: 160
- Watchers: 5
- Forks: 186
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-canvas - react-signature-pad - A signature pad implementation for react.   (Libraries / Signature pad)
README
[](https://www.npmjs.com/package/react-signature-pad)
# React Signature Pad
A [signature pad](https://github.com/szimek/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);
```
# 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](style.css).
# 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.