fix: add default penColor prop

[Lav39]

Summary

This PR addresses an issue where the penColor prop might be passed as undefined during parent component re-renders. This causes the underlying signature_pad library to set the fillColor as undefined, preventing any further drawing on the canvas. To resolve this, we are adding penColor as a default prop with a value of 'black'.

Changes

Added penColor to defaultProps with a default value of 'black'.

How to reproduce the issue

import React, { useRef, useCallback, useState } from "react";
import SignatureCanvas from "react-signature-canvas";

const App = (props) => {
  const { penColor } = props;
  const signaturePadRef = useRef();
  const [counter, setCounter] = useState(0);

  function clearPad() {
    signaturePadRef.current?.clear();
  }

  const onBegin = useCallback(() => {
    setCounter(counter + 1);
  }, []);

  const onEnd = useCallback(() => {
    setCounter(counter + 1);
  }, []);

  return (
    <div style={{ position: "relative", border: "1px solid" }}>
      <div onClick={clearPad}>Clear</div>
      <SignatureCanvas
        ref={signaturePadRef}
        onBegin={onBegin}
        onEnd={onEnd}
        canvasProps={{ style: { width: "100%", height: "100%" } }}
        penColor={undefined}
      />
    </div>
  );
};

export default App;

1. Run above code in a react sandbox.
2. Draw something and then click on Clear text and try to draw some again and it won't work.
3. If you comment out the penColor prop, you will not encounter the issue.

[agilgur5]

        penColor={undefined}

3. If you comment out the penColor prop, you will not encounter the issue.

This seems contrived to me

might be passed as undefined during parent component re-renders.

I'm not sure this should be resolved here, but rather in the parent component. You could technically apply a similar fix for every other inherited prop, so that does not seem like good precedent. Special casing is a rabbit hole.

There were also no tests added here despite the special case.

[agilgur5]

This seems like it could be a breaking change

[Lav39]

Not a breaking change.
This is inspired from underlying library: https://github.com/szimek/signature_pad/blob/master/src/signature_pad.ts#L96

[agilgur5]

Or rather, the 2.x version: https://github.com/szimek/signature_pad/blob/2171e510b74362a8dd7c8e7fc77a142f16a4aed1/src/signature_pad.js#L24

Although yes, in both cases, upstream does not prevent you from assigning undefined. As a wrapper, I think following that behavior and not deviating from it is appropriate.