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 |

🔗 See the full API reference → Docs

🚀 Try It Live

🔗 Check out the interactive demo → react-esign-docs.vercel.app

📜 License

MIT License. See LICENSE for details.

⭐ Support & Feedback

If you find react-esign useful, give it a star on GitHub ⭐ and share it with fellow developers!

🚀 Happy Coding!