Expose underlying events from signature_pad about react-signature-pad-wrapper HOT 8 CLOSED

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.

from react-signature-pad-wrapper.

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]);

from react-signature-pad-wrapper.

You can already get the original signature pad instance through a ref (e.g. see Layout.tsx in the example dir). I think that should allow you to do what you want?

from react-signature-pad-wrapper.

Ah perfect! The instance field it is.. Thx!

from react-signature-pad-wrapper.

The above .onEnd no longer works as it was replaced by event emitters. See here

The following updated code works:

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

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

  React.useEffect(() => {
    if (signaturePad) {
      signaturePad.instance.addEventListener('endStroke', () => {
        setSignature(signaturePad.toDataURL());
      });
    }
  }, [signaturePad]);

from react-signature-pad-wrapper.

Nice, thanks for the example!
I have to upgrade my code, but I suspect that it is necessary to remove the event listener in order to not reregister the event handler on every mount?

from react-signature-pad-wrapper.

@JamesRobertWiseman
Have you tested the code?

from react-signature-pad-wrapper.

@sankarkumar23 Yes, and it is working fine my end.

from react-signature-pad-wrapper.