I have a React app which makes use of react-signature-pad-wrapper (which is a React wrapper for signature_pad). My component needs to call a function whenever someone stops drawing on the canvas. Until recently, I could use the onEnd event like so:

const signaturePadOptions = {
  minWidth: 1,
  maxWidth: 5,
  penColor: "rgb(0, 0, 0)",
  // This part doesn't work anymore:
  onEnd: handleEndStroke, 
}

Whenever the onEnd event was fired, my handleEndStroke function was called. But that changed in version 4 of signature-pad: Now we have to listen for endStroke events on the signaturePad. I’ve used the useEffect hook with addEventListener in my React component:

useEffect(() => {
  const handleEndStroke = () => {
    // I do my custom stuff here
  };

  if (!!ref.current && !!ref.current.signaturePad) {
    const current = ref.current;
    // initiate the event handler
    current.signaturePad.addEventListener(
      "endStroke",
      handleEndStroke,
      false
    );
    // clean up the event handler
    return function cleanup() {
      current.signaturePad.removeEventListener(
        "endStroke",
        handleEndStroke
      );
    };
  }
}, [ref]);