Using SignaturePad in ReactJS

Question

Does anyone has experience in using SignaturePad in React?

I realise that the example is using DOM which I can try to replicate with Ref in react, but it doesn't seem very natural and I can't see any example online of using it in React.

Can anyone help?

Thanks

score 3 · Answer 1 · answered May 13 '20 at 07:43

3

If you are looking for a library that you want to integrate with React application then you can check out this React Component Wrapper around Signature Pad. Hope this helps.

answered May 13 '20 at 07:43

Nithish

5,393
2
9
24

score 2 · Accepted Answer · answered May 14 '20 at 09:52

The way to access DOM in react is using Refs

You can either use React.createRef() or use React hooks with useRef

Then you can call your ref to the canvas like this:

const myRef = useRef(null);

useEffect( () => { myRef.current.doSomething() });

return(
  <canvas ref={myRef}> </canvas>
)

Using SignaturePad in ReactJS

2 Answers2