How to assign the value back to signature pad?

[sankarkumar23]

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.

[michaeldzjap]

Shouldn't fromDataURL / fromData do what you want? See here. You can access these methods when you create the component as <SignaturePad ref={this.signaturePad} /> and then call this.signaturePad.fromDataURL('youImageData').

[sankarkumar23]

I did see all the methods.. I've a complete implementation with this library on JavaScript/JQuery. Now I am moving everything to react hooks. Generally, in React (sorry, I am new to react), we assign the value like this value={props.yourImageData} and for save we can use onSaveClick and update to the state. My Save button is in a different component. How can I achieve the same on signaturePad? In short, where to make this call this.signaturePad.fromDataURL('youImageData')? I used useEffect() hook and it worked. As there is onChange event how do I update it back to the state? Not necessarily in state.. how to get the signaturePadRef in other component? or how do I call toDataURL as my Save button is in a different component?

[michaeldzjap]

Without seeing some code it is kind of hard to understand what you are trying to achieve exactly. Also, the issue tracker for this repository is meant to be used primarily to report bugs and feature requests. Questions about usage are better suited for something like Stack Overflow. I'm happy to help where I can, but my time is very limited and so you'll reach a larger audience of developers than can potentially help you that way. But note that you'll get the best responses if you are specific about what you want to achieve and provide a code example of what you have tried out so far. Like, only saying "My Save button is in a different component." is kind of vague... Do you mean that the signature pad component and the save button component don't share the same parent component?

Perhaps this (although not a complete solution to you problem) can give you a better idea of how to hook into the events signature pad offers using React hooks.

[sankarkumar23]

Yes, the link helps. Thank you.