blackjk3/react-signature-pad

A signature pad implementation for react.

React Signature Pad

A signature pad implementation for react.

Basic Usage

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

React.render(
  <SignaturePad clearButton="true" />,
  document.body
)

Methods

<SignaturePad clearButton="true" ref="mySignature" />
...

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.

Example

$ npm start

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

react-signature-pad's Issues

Deprecation warning for React.findDOMNode calls under React 0.14

Deprecation warnings are thrown due to the use of React.findDOMNode in the code when using this with React 0.14. This will need to be changed to ReactDOM.findDOMNode instead, and the react-dom package will need to be depended upon, as well as requiring React 0.14+ for the updated version.

See: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#two-packages-react-and-react-dom

Add documentation for possible props

I would Like to have an onChange event like all input elements.

[Idea] How about integrate the styles as part of the React Component?

Using inline styling. See webpack css loader or things like Aphrodite.
It'll drastically reduce install complexity: for example, for css-free projects.

Showing signature pad on button click

Hi, i've very new to React and javascript and i was trying to use your library. Right now, when i add it to render method of my page, get this signature pad loaded right away. How can i call appearance of this canvas on button click and how can i add "Save" button to this component?

Deprecate in favor of `react-signature-canvas`? Or use it under-the-hood?

Hi @blackjk3 , thanks for making this component!

I forked off into react-signature-canvas around 3 years ago when this was no longer maintained. The fork was initially just to have an unopinionated wrapper around signature_pad, i.e. no styles and no other elements rendered other than the canvas -- leaving visuals to downstream developers. This is of course would be a very breaking change for users of react-signature-pad, so that and lack of maintenance led to the persistent fork (though #6 was breaking but was eventually released as a patch version).
Along the way I also added lots of documentation (solving #5 and more), a live demo, various bugfixes and features like built-in trimming, and eventually wrapped the upstream signature_pad in v1.0.0 to have its updates and bugfixes baked in (when I realized the code here was mostly identical (with some React specific changes and with resizing built-in) to that of an old signature_pad release). react-signature-canvas is now currently ~40 commits ahead

I've also been very diligent with SemVer releases as well as backporting lots of fixes to older versions. I'm not perfect, but I've eventually responded to all issues and PRs (and try to respond quickly to most, though some PRs invariably take time, at most a few months, due to the time involvement required for review, edit, merge, bump version, release, and backports), and part of the purpose of v1.0.0 was to drastically reduce the surface area by wrapping signature_pad. Various folks find react-signature-canvas by organically looking at forks and switch to it, with some getting confused occasionally between the two versions.
v1.0.0 has been stable for over a year now and this library hasn't been maintained in a few years, so I thought it might make sense to:

1. Deprecate this library and point to react-signature-canvas, noting that it would have some breaking changes due to the above points

OR

2. Use react-signature-canvas under-the-hood -- this way it should be 100% backward-compatible and the buttons and styling of react-signature-pad can remain as is!

Either option would heavily reduce the maintenance burden and I think clarify the status for many users. I'm happy to do the same for someone else if my fork goes unmaintained for an extended period of time as well. But up to you of course, can leave it as is and close this out if you want.

---

(/begin stats, which really don't mean much.

At some point (~1.5 years ago?), NPM downloads of my fork, react-signature-canvas, started eclipsing your original, react-signature-pad.
Here's an admittedly dumb table I made bc of stat obsessions -- these really don't matter or even necessarily make any sense head-to-head, especially since sample size is small on some stats, updates and CI influence downloads, commits are very different, issues and PR quality vary, size is influenced by features (and docs??), are forks good or bad?, etc, etc, but for anyone else interested:

stat	react-signature-pad	react-signature-canvas	diff
commits ahead	5	~40	~8x ❇
total downloads	~125k	~500k	~4x ❇
weekly downloads	~1.5k	~16k	~11x ❇
min+zip size	~2.9kb	~4.7kb	~1.5x
weekly GH views	unknown	~1k	NaN
weekly GH visitors	unknown	~200	NaN
used by public repos	75	153	~2x ❇
used by public packages	5	11	~2x ❇
stars	114	98	~4/5
forks	63 (net)	35	~1/2
open issues	7	1	~1/7 ❇
closed issues	3	14	~4x ❇
open PRs	3	2	2/3 ❇
closed PRs	4	13	~3x ❇

react-signature-canvas is ~40 commits ahead, is publicly used by 153 repos/11 packages, and has ~500k total/~16.5k weekly downloads, 98 stars, 35 forks, 1 open/14 closed issues, 2 open/13 closed PRs, and ~1k views/~200 visitors per week. (I've also responded to all open issues and reviewed or partially merged all open PRs)
react-signature-pad is publicly used by 75 repos/5 packages and has ~125k total/~1.5k weekly downloads, 114 stars, 63 (net) forks, 7 open/3 closed issues, 3 open/4 closed PRs, and [unknown].

/end dumb stats)

Error accessing methods

Hello,

I am having problems accessing the methods you described via Refs.

I keep getting signature.clear is not a function

Here's my code

Signature = React.createClass({
    displayName:"Signature",

    clearSig(){
        var signature = React.findDOMNode(this.refs.mySignature);
        signature.clear();
    },
    acceptSig(){
        var signature = React.findDOMNode(this.refs.mySignature);
        if(signature.isEmpty()){
                alert('Please sign the agreement');
            return;
        }
        var sigImage = signature.toDataURL();
        console.log(sigImage);

    },
    render:function(){
        return(
            <div>
                <SignaturePad ref="mySignature" />
                <div className="signature-bottom">
                    <div className="pull-left">
                        <div onClick={this.clearSig} className="btn reset">
                            Clear Signature
                        </div>
                    </div>
                    <div className="pull-right">
                        By clicking accept you agree to the terms stated above.
                        <div onClick={this.acceptSig} className="btn save pull-right">
                            Save &amp; Accept
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

Can you help point me in the right direction?

Can't make it work locally

I tried to run the code with npm start but when i go to http://localhost:8080 I see

The localhost page isn’t working

localhost didn’t send any data.
ERR_EMPTY_RESPONSE

What am i missing ?

isEmpty is false by default

When signature component is first mounted and no data has been set, isEmpty() returns false when it should return true.

Styles on body interfere when used in other app

Some styles are only relevant for the example and break styling when used in an actual app.
I moved the styles to index.html.

I added a pull request #6

Thanks

Not working until canvas resizes

When the pad loads it doesnt work, if I resize the screen then it works

Mobile browser - Clears the signature on scrolling

In mobile, when we scroll up/down rapidly the addressbar appears and I think that fires the resize event, so the signature is cleared. Actually it should not happen, as per szimek/signature_pad#318 signature should be cleared on orientationchange event in mobile.

We are trying to change window.addEventListener("resize", this._resizeCanvas.bind(this)); to window.addEventListener("orientationchange", this._resizeCanvas.bind(this)); in here

Can you please suggest a fix?

1. In browser, resize should work as expected, should clear the canvas if the size changes.
2. In mobile, it should works same if we change the orientation, but on scrolling it should work fine.