react-esign

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!