michaeldzjap / react-signature-pad-wrapper Goto Github PK

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} />

Captured on browser with 80% zoom

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

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

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.