michaeldzjap / react-signature-pad-wrapper Goto Github PK
View Code? Open in Web Editor NEWA React wrapper for signature pad
License: MIT License
A React wrapper for signature pad
License: MIT License
I recently migrate my application to use react-scripts v5 and react-signature-pad-wrapper v3. Since then I have the following error message :
WARNING in ./node_modules/react-signature-pad-wrapper/dist/react-signature-pad-wrapper.es.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'XX\node_modules\react-signature-pad-wrapper\src\SignaturePad.tsx' file: Error: ENOENT: no such file or directory, open 'XX\node_modules\react-signature-pad-wrapper\src\SignaturePad.tsx'
It looks that my build now look for source map. You npm package contains a react-signature-pad-wrapper.js.map
that reference the source and the source code is not included in the package.
Could you update the package to include source code ?
I am able to store the signature by calling the toDataURL() method.
signaturePad.current.toDataURL();
But it comes with a background!
How do I only capture the pen stroke with transparent background?
Here is what the frontend looks like:
After saving the data in the backend, this is what I am getting:
When I developed an app with this package it looked fine until I ran it on my Macbook Pro.
Then the size of the canvas doubled in size.
What causes this?
This issue raise the need to provide more documentation and real world use case of saving the Generated signature into SVG or PNG, The current document documentation is very insufficient and does not well explain how to use this in real world solution, it is just a pieces of cropped code which does not do a good job in explaining the actual usage,
Please someone have a look at this
I am trying to reload the signature that was saved earlier. How do I assign it back from state?
How do I save the signature when my Save button is in a different component?
Extending the example with these two actions would be great help because this is a uncontrolled component.
Why there is no Base64 conversion example
Problem:
Is it possible to use react-signature-pad-wrapper
in typescript? Something like this npm i @types/react-signature-pad-wrapper
Temporary solution:
I declared module in my custom types, Create file react-signature-pad-wrapper.d.ts
with content declare module 'react-signature-pad-wrapper'
I'm trying to update the color like this:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color: "red"
};
}
handleColorChange(color) {
const rgb = color.rgb;
const the_color = `rgb(${rgb.r},${rgb.g},${rgb.b})`;
this.setState({ color: the_color })
}
render() {
window.devicePixelRatio = 1;
return (
<div>
<SignaturePad width={750} height={150} options={{ penColor: this.state.color }}
ref={(pad) => { this._pad = pad; }}
/>
<GithubPicker onChangeComplete={c => this.handleColorChange(c) }
/>
</div>
);
}
}
the component picks up the initial color in the state, but successive changes in state do not make any difference.
What am I doing wrong?
thanks
Hello,
I have been using your package in my product and recently updated my Chrome to Version 113.0.5672.126 and encountered this problem:
The line flickers until you change the tab after which when you revisit it stops and displays only the last part of the stroke
Below is a screenshot for how it looked in Version 112.0.5615.121
The default redrawOnResize
property is set to false which is good. However, the URL bar shows/hides when scrolling a page which fires a resize and clears the canvas. If you have a form that needs to scroll, the signature pad clears itself before being able to submit it. You don't want to have to be forced to redraw on resize because of the data degradation each time. I can't think of a way to address the issue though!
Edit: would it work to store the dimensions and check to see if they've changed inside the resize event rather than wiping the canvas on all resize events? The URL bar causes a resize event to fire but the dimensions haven't actually changed.
I've implemented the signaturepad on react hooks. Everything working fine with default browser zoom 100%. I zoomed in the browser(say 80%), sign the signature and saved it. When I click on refresh/reload the signature the signature size is increasing to as if was signed with 100% zoom. Would there be a way keep the signature as per the current browser's zoom in/out size.
I tried redrawOnResize with true/false and also removing width & height.. but no difference.
<SignaturePad ref={signaturePadRef} width={500} height={200} redrawOnResize={false} />
Hi I was wondering how you get the signature pad value to post on your api?
I am using React Boilerplate. After I npm install this package and I get following errors.
ERROR in ./node_modules/react-signature-pad-wrapper/src/SignaturePad.js
Module parse failed: [codebase]\node_modules\react-signature-pad-wrapper\src\SignaturePad.js Unexpected token (8:23)
You may need an appropriate loader to handle this file type.
| class SignaturePad extends PureComponent {
|
| static displayName = 'react-signature-pad-wrapper';
|
| static propTypes = {
@ ./node_modules/react-signature-pad-wrapper/src/index.js 1:0-42
@ dll reactBoilerplateDeps
If i import dependency like this import SignaturePad from 'react-signature-pad-wrapper/dist/react-signature-pad-wrapper';
. It will work but it seems like the library that don't precompile the code to ES5 when package source.
I'm assessing upgrade to React 18 for our app.
react-signature-pad-wrapper
has a peer dependency on react@"^17.0.1"
Here's the output when running npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from [email protected]
npm ERR! node_modules/react-signature-pad-wrapper
npm ERR! react-signature-pad-wrapper@"3.1.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I see that husky
is a dev dependency, but the postinstall
hook runs after the package is installed in other projects. I'll open a PR to remove that line, but right now all installs of this package are broken for projects that do not use husky.
error /code/node_modules/react-signature-pad-wrapper: Command failed.
Exit code: 127
Command: husky install
Arguments:
Directory: /code/node_modules/react-signature-pad-wrapper
Output:
/bin/sh: 1: husky: not found
info Visit <https://yarnpkg.com/en/docs/cli/install> for documentation about this command.
The command '/bin/sh -c yarn install' returned a non-zero code: 127
I was trying to trigger some behaviour by passing function to onEnd hook, this hook dont want to fire. Am I doing something wrong?
Basically I was trying to save the data to a state after user ends writing on the canvas.
function handleOnEnd() {
console.log('never fire')
}
<SignaturePad
value={props.value}
onEnd={handleOnEnd}
ref={ref => (this.signaturePad = ref)}
options={{}}
/>
See this
The rollup-plugin-terser doesn't support Rollup v3 and doesn't seem to be actively maintained at the moment.
A temporary replacement could be rollup-plugin-minification until eventually the official Rollup Terser plugin is released.
The removal of type information from the package means I can't import "react-signature-pad-wrapper"
in a react project that uses typescript.
As a workaround I have copied the contents of dist/SignaturePad.d.ts
from v3.0.0 into my own local .d.ts
file, wrapped in declare module "react-signature-pad-wrapper" { }
. This unblocks me for now, but it's not ideal as I don't want to maintain that separately.
I'd recommend you either reintroduce a .d.ts
file in your project (addressing the issue of local paths that you just fixed in 3.1.0) or create a separate @types/react-signature-pad-wrapper
project. Personally, I find it much more convenient when it's included in the library itself, but maybe typescript support isn't a priority.
fromDataURL
should allow options, e.g.: ratio, width, height, etc.
Related Code:
https://github.com/michaeldzjap/react-signature-pad-wrapper/blob/develop/src/SignaturePad.tsx#L263
Reference:
https://github.com/szimek/signature_pad#api
As throttle-debounce is used in production code https://github.com/michaeldzjap/react-signature-pad-wrapper/tree/8d362f5dfb550edbc119137515b0ab1d628ffda8/src/SignaturePad.tsx, should we move it to dependencies instead of devDependencies
react-signature-pad-wrapper/package.json
Line 70 in 8d362f5
Hi,
how can I make multiple signature-pads on the same page and being able to reference each of them individually?
I'm not sure how to extend the example here to take into account several instances of it:
return <SignaturePad ref={ref => this.signaturePad = ref} />;
Hello,
I have been using your package in my product and recently updated my Chrome to Version 113.0.5672.126 and encountered this problem:
The line flickers until you change the tab after which when you revisit it stops and displays only the last part of the stroke
Below is a screenshot for how it looked in Version 112.0.5615.121
According to the documentation you can do:
render() {
return <SignaturePad ref={this.signaturePadRef} />;
}
however if it is not listed in the Props
type
react-signature-pad-wrapper/src/SignaturePad.tsx
Lines 5 to 10 in b9bf396
ref
property should be added to Props
to avoid compilation error
On mobile, when an input has focus (and the keyboard is hidden so you can continue down the page), and you draw on the signature pad, when you release the touch, focus jumps back to the input. If the input is much higher on the page, it scrolls back up the page to the input and pops the keyboard back up. It's not necessarily a bug, just the current HTML behavior; but it's certainly nonintuitive for a user.
In order to fix this HTML behavior, one needs to handle onMouseDown
and/or onTouchStart
in the canvas. For example:
<SignaturePad
ref={ref => this.signaturePad = ref}
canvasProps={{
onMouseDown: () => { if ('activeElement' in document) document.activeElement.blur(); },
onTouchStart: () => { if ('activeElement' in document) document.activeElement.blur(); },
}}
/>
However, in order to do that, we need to be able to pass props directly to your wrapper's canvas
element (in render()
):
<canvas
className={this.props.className}
ref={ref => this._canvas = ref} {...this.props.canvasProps} />
Would you mind giving us the ability to pass props directly to the canvas?
The steps to run example are incomplete as the example is using the source of the lib, not the 'package'.
So the root directory must be build first, before the example dir.
It looks as though the latest release of this package breaks our Docker build with the following error:
Error: Package exports for '/app/node_modules/throttle-debounce' do not define a valid '.' target
at resolveExportsTarget (internal/modules/cjs/loader.js:545:13)
at applyExports (internal/modules/cjs/loader.js:459:14)
at resolveExports (internal/modules/cjs/loader.js:508:12)
at Function.Module._findPath (internal/modules/cjs/loader.js:577:20)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879:27)
at Function.Module._load (internal/modules/cjs/loader.js:785:27)
at Module.require (internal/modules/cjs/loader.js:956:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/app/node_modules/react-signature-pad-wrapper/dist/react-signature-pad-wrapper.js:1:90)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
Rolling back to the last version of react-signature-pad-wrapper resolved this issue.
FOA hello and thanks for this useful project.
i want to add event listener on this canvas to take speed and acceleration data.
is it possible that could you help me please?
Thanks for this repo, very useful.
I need help about the "isEmpty()" function.
I have the component defined as follow:
const refSignature = useRef(null);
... some code here ....
<SignaturePad ref={refSignature} options={{ minWidth: 1, maxWidth: 3, penColor: 'rgb(0,0,0)' }} />
The component works fine and I can get dataUrl from the canvas but I need to enable a button only if the canvas is not empty. I tried in some different ways but I get errors.
What is the best way to do this?
Hi,
I'm trying to get a callback when a change happens in the signature pad so that I can enable/disable a button that allows the user to go to the next step of a process depending on whether they entered a signature or not.
Is there a way to do this? I tried using onChange
but that didn't get called at all.
There is no React 18 adapter for Enzyme and there probably not will be. The proper thing to do will be to migrate from Enzyme to React Testing Library.
See this
Its 2024 can we please stop using Classes?
Also I'm sure its me but finding difficult to resize it with outer div, either i get offset of input or it does not work or it overlaps with other elements.
Exposing the underlying events of signature_pad
would be very useful as it allows to react to signature inputs instead of polling the data of signature_pad
.
This would allow a pattern like:
const [signature, setSignature] = useState("")
...
<SignaturePad ... onEnd={x=> setSignature(x.toDataURL())} />
or add the events to the options, as they are "low level" events, like
<SignaturePad ... options={{
onEnd(x) { setSignature(x.toDataURL()) }
}} />
This allows the rest of the code to react to the value of signature
easily (e.g. disable the save button and display a message if no signation was made...).
Or alternatively expose the whole underying signature_pad
object.
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.