`TypeError: sigCanvas.current.getTrimmedCanvas is not a function`

[pneha2296]

my code is:

<SignaturePad
  ref={sigCanvas}
  // inputRef={ref}
  canvasProps={{
    className: "h-48 w-full border border-black bg-white",
  }}
  id={`${list?.id}`}
  {...register(`${list?.id}`, {
     required: false,
     onChange: (e) => handleFileSelect(e, list?.id),
   })}
/>
<label
  htmlFor={`${list?.id}`}
  onClick={() => {
    const url = sigCanvas.current.getTrimmedCanvas().toDataURL("image/png")
    onClickSignatureUpload(url, list?.id)
  }}
  className="cursor-pointer text-dark-reject"
> Save</label>

I used label to save image and it will throw error

[agilgur5]

Sorry, I can't reproduce this. All test pass, the demo, CodeSandbox, and other examples all work with getTrimmedCanvas.

my code is:

This is just JSX and not even a full component. It is missing many pieces, such as how you create the ref, for instance. This is not useable as a reproduction. Furthermore, much of the code you added here is not specific to react-signature-canvas and even adds props like ...register that aren't related to this component. I also had to fix various indentation issues in this code sample as well...

Please provide an actual, minimal reproduction or demo displaying this behavior, such as:

• a CodeSandbox example (or equivalent) or
• a screencapture of it at the demo site and the steps you took to reproduce it or
• a failing test case

TypeError: sigCanvas.current.getTrimmedCanvas is not a function

That being said, this doesn't even seem to be a react-signature-canvas error, and rather, seems to be a React usage issue. getTrimmedCanvas is not a function because sigCanvas.current does not exist / is null. Per the React ref docs, ref.current is null before mounting and after unmounting.