React-esign NPM

react-esign ✍️

A lightweight, dependency-free signature input component for React.

react-esign makes it effortless to capture smooth, customizable digital signatures in React apps. No dependencies, no bloat—just a simple and powerful signature input.

🔗 Live Demo & Docs

📦 Installation

Install via npm or yarn:

npm install react-esign
# or
yarn add react-esign

🛠 Usage

Basic Integration

import { SignatureInput } from "react-esign";

const SignaturePad = () => {
  const handleSignatureChange = (file: File) => {
    console.log("Signature Changed");
  };

  return <SignatureInput onChange={handleSignatureChange} />;
};

export default SignaturePad;

🎯 That’s it! You now have a working signature input in your React app.

🎨 Customization

Easily customize styles, theme, and behavior:

import { SignatureInput } from "react-esign";

const CustomSignaturePad = () => {
  return (
    <SignatureInput
      onChange={(file) => console.log("Signature Changed")}
      isDisabled={false}
      isError={false}
      themeColor="#E50914"
      strokeWidth={3}
      clear
      download
      width={550}
      height={150}
    />
  );
};

export default CustomSignaturePad;

Available Props

Prop	Type	Default	Description
`onChange`	`(file: File) => void`	Required	Callback triggered when signature changes
`isDisabled`	`boolean`	`false`	Disables input when `true`
`isError`	`boolean`	`false`	Applies an error style when `true`
`themeColor`	`string`	`"#000"`	Sets active border & button color
`strokeWidth`	`number`	`2`	Signature stroke thickness
`clear`	`boolean`	`false`	Shows a button to clear signature
`download`	`boolean`	`false`	Shows a button to download signature
`width`	`number`	`400`	Canvas width
`height`	`number`	`200`	Canvas height