https://github.com/blackjk3/react-signature-pad

A signature pad implementation for react.
https://github.com/blackjk3/react-signature-pad

Last synced: 2 months 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 (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-08-22T09:55:20.000Z (over 1 year ago)
• Last Synced: 2024-09-01T05:38:59.908Z (4 months ago)
• Language: JavaScript
• Size: 30.3 KB
• Stars: 159
• Watchers: 5
• Forks: 183
• 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

        
[![npm package](https://img.shields.io/badge/npm-0.0.6-orange.svg?style=flat-square)](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.