blackjk3 / react-signature-pad Goto Github PK
View Code? Open in Web Editor NEWA signature pad implementation for react.
A signature pad implementation for react.
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 & Accept
</div>
</div>
</div>
</div>
);
}
});
Can you help point me in the right direction?
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:
react-signature-canvas
, noting that it would have some breaking changes due to the above pointsOR
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)
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 ?
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?
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
I would Like to have an onChange event like all input elements.
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?
Using inline styling. See webpack css loader or things like Aphrodite.
It'll drastically reduce install complexity: for example, for css-free projects.
When the pad loads it doesnt work, if I resize the screen then it works
When signature component is first mounted and no data has been set, isEmpty() returns false when it should return true.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.