TypeScript implementation example

[casulit]

[darkengine]

No description provided.

You also need to run npm install @types/react-signature-canvas or yarn add @types/react-signature-canvas to install the definition module.

[akharag]

I think he means having an actual example using the:

You also need to run "npm install @types/react-signature-canvas" or "yarn add @types/react-signature-canvas" to install the definition module.

I'm not an expert with typescript, so I'm having a hard time using the @types/react-signature-canvas

const Widget = () => { let sigPad: <what type goes here? SignaturePad?> = {}; ... }

Type '{}' is missing the following properties from type 'ReactSignatureCanvas': on, off, clear, isEmpty, and 14 more.

I know this might be more of a stackoverflow question. Sorry, open source newbie.

[darkengine]

Let me leave some codes here, you need to use padRef to call APIs of SignPad inside a functional widget:

const padRef = useRef<SignatureCanvas>(null)

// handle "Clear" button clicked
const handleClickClear = () => {
    padRef.current?.clear()
}

return (
    <div className='sign-pad'>
      <SignatureCanvas
          ref={padRef}
          penColor='black'
          canvasProps={{ width: 400, height: 200, className: 'sigCanvas' }} />
    </div>
  )

[agilgur5]

Thanks for providing an example in my absence @darkengine !

Will have to add this to the official examples Storybook once I get that up and running. Closing as resolved in the meantime since the example now exists in the above comment.