✍️ react-signature-simple

Users can easily draw their signature on the canvas and get it as a PNG, either as a blob or in base64 format.

Note: This library works with React versions ^18.0.0 and ^19.0.0

Install

Run the following command to install:

npm i react-signature-simple

Props

Prop	Type	Default	Description
width	number	300	Sets the canvas width.
height	number	150	Sets the canvas Height.
penColor	string	blue	Sets the drawing color.
canvasBorderColor	string	#CCCCCC	Sets the canvas border color.
canvasBorderWidth	string	1px	Sets the canvas border width.
backgroundColor	string	white	Sets the canvas background color.
onEnd	() => void	() => {}	Sets the callback after ending drawing.

Example

import { useRef } from "react";
import ReactSignatureSimple from "react-signature-simple";
import type { IReactSignatureSimpleHandle } from 'react-signature-simple';

export default function App() {
  const sigRef = useRef<IReactSignatureSimpleHandle>(null);

  const save = async () => {
    const base64 = sigRef.current?.getBase64();
    console.log("Base64:", base64);

    const blob = await sigRef.current?.getBlob();
    console.log("Blob:", blob);
  };

  return (
    <div>
      <ReactSignatureSimple ref={sigRef} />
      <br />
      <button onClick={save}>Save</button>
      <button onClick={() => sigRef.current?.clear()}>Clear</button>
    </div>
  );
}

Demo

In order to start the demo version, run the following commands:

npm run build
cd ./demo
npm i
npm run dev

The example project uses Vite in background and the output will be here by default: http://localhost:5173/