Expose underlying events from signature_pad

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.

[JamesRobertWiseman]

You are right. The following will work:

  const [signaturePad, setSignaturePad] = React.useState<SignaturePad>();

  const signaturePadRef = React.useCallback((signaturePad: SignaturePad) => {
    setSignaturePad(signaturePad);
  }, []);

  const onStrokeEnd = () => {
    setSignature(signaturePad.toData());
  }

  React.useEffect(() => {
    if (signaturePad) {
      signaturePad.instance.addEventListener('endStroke', onStrokeEnd)
    }
    //cleanup event listener
    () => signaturePad.instance.removeEventListener('endStroke', onStrokeEnd);
  }, [signaturePad]);

[toburger]

If someone is having trouble accessing the underlying instance and registering the event with the hooks API here is the working TS code:

  const [signaturePad, setSignaturePad] = React.useState<SignaturePad>();
  const signaturePadRef = React.useCallback((signaturePad: SignaturePad) => {
    setSignaturePad(signaturePad);
  }, []);
  React.useEffect(() => {
    if (signaturePad) {
      signaturePad.instance.onEnd = () => {
        setSignature(signaturePad.instance.toDataURL());
      };
    }
  }, [signaturePad]);

More info of why this is quite tricky can be found here or here.