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:

``sh
npm install react-esign


or


yarn add react-esign
`

---

🛠 Usage

$3

`jsx
import { SignatureInput } from "react-esign";

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

return ;
};

export default SignaturePad;
`

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

---

🎨 Customization

Easily customize styles, theme, and behavior:

`jsx
import { SignatureInput } from "react-esign";

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

export default CustomSignaturePad;
`

$3

| 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!