import { SignaturePad } from "@siamf/react-signature-pad";

//SignaturePad Component
<SignaturePad
  canvasProps={{ width: 600, height: 300 }}
/>

import { SignaturePad, SignatureCanvasRef } from "@siamf/react-signature-pad";
import { useRef } from "react";

const MyComponent = () => {
    const ref = useRef<SignatureCanvasRef>(null);

    const getDataUrl = () => {
        if (ref.current) {
            const dataUrl = ref.current.toDataURL();
            console.log('Signature as PNG:', dataUrl);
        }
    };

    //You can use All API by calling ref object;

    return (
        <div>
          <SignaturePad
            canvasProps={{ width: 600, height: 300 }}
            ref={ref}
          />
          <button onClick={getDataUrl}>
            Download Signature
          </button>
        </div>
    )
}

export default MyComponent;