Property 'getTrimmedCanvas' does not exist on type '{}'.ts(2339), Signature Pad

Question

I am trying to implement a function into my app, so the User can sign PDFs. I found on CodeSandbox an example for a Signature Pad and i tried to insert it into my project but i get 2 errors called:

Property 'getTrimmedCanvas' does not exist on type '{}'.ts(2339)

Property 'clear' does not exist on type '{}'.ts(2339)

Codesource Signature Pad example

Codepart with the Errors

import Popup from "reactjs-popup";
import SignaturePad from "react-signature-canvas";
import { useState, useRef } from "react";
import React from "react";

function Button() {
  const sigCanvas = useRef({});
  const [imageURL, setImageURL] = useState(null);
  const clear = () => sigCanvas.current.clear();
  const save = () =>setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL("image/png"));

  return (

//for more Code use the Link: Codesource Signature Pad example

  );
}

export default Button;

I have installed this two libraries:

npm install --save reactjs-popup
npm install --save react-signature-canvas

Any idea how to fix them? Thanks in adance

Answer 1

Very simple you are using .tsx file which is causing the issue. Just change the file type from tsx to .js or .jsx it will work fine :)

Answer 2

I resolve this problem add a type in the useRef:

const sigCanvas = useRef<any>();

Answer 3

I've just used react-signature-canvas and this works for me

On package.json

"@types/react-signature-canvas": "^1.0.2",
"react-signature-canvas": "^1.0.6",

On component

import React, { useRef } from 'react';
import SignatureCanvas from 'react-signature-canvas';

const signaturePadRef: React.MutableRefObject<SignatureCanvas> = useRef(null);

return (
    <SignatureCanvas
      ref={(ref) => {
        signaturePadRef.current = ref;
      }}
    />
  );