React ESign āœšŸ»

react-esign is a lightweight, dependency-free React component built for capturing handwritten signatures. It provides a simple and responsive signature pad, perfect for e-signatures, form authentication, or user confirmations in React applications

Theme Color
Input Mode
Button Type
Code Preview
<SignatureInput      themeColor="#1976d2"      buttonType="text"      isClear={true}    />

About

React ESign was designed to allow react developers to capture handwritten signatures in their applications with one simple component.

Getting Started

start by installing react-esign via npm

npm install react-esign

Import the SignatureInput component and include it in your render function:

import SignatureInput from "react-esign";

Component API

Clear (boolean)

Clear controls if your signature input displays a 'clear' button; which is used to clear the signature input. This is useful if a mistake was made during the signature input process.

Download (boolean)

Download adds a button to the signature input that allows the user to download the signature as an image.

Error (boolean)

Error adds an error state to the signature input. Useful for form validation.

isDisabled (boolean)

isDisabled disables the signature input and makes it non-interactive.

themeColor (string)

themeColor defines the color of the signature input accents. This defaults to #1976d2 to align with the default Material UI theme colors.

inputMode "draw" | "type" | "auto"

inputMode defines the mode of the signature input. This can be set to draw, type, or auto.

draw (default) - allows the user to draw a signature

type (experimental) - allows the user to type a signature

auto (experimental) - allows the user to draw or type a signature

buttonType "button" | "text"

buttonType defines the type of button to use for the signature input. This can be set to button or text.

button (default) - uses a button for the signature input

text - uses a text button for the signature input

strokeWidth (number)

strokeWidth defines the width of the signature stroke. This defaults to 2(px).

onChange (event: File)

onChange is a callback function that is called when the signature input is changed. It returns the signature data as a File object.

height (number | string)

height defines the pixel height of the signature input. This defaults to 150(px).

width (number | string)

width defines the pixel width of the signature input. This defaults to 450(px).