Signature Input captures a handwritten signature using a responsive canvas and stores the result as a data URL string.
Preview
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | "" | Data URL string of the signature image. |
| onChange | (value: string) => void | - | Called with the PNG data URL when drawing ends. |
| disabled | boolean | false | Disables drawing and the clear action. |
| height | number | 160 | Canvas height in pixels. |
| penColor | string | "#0f172a" | Stroke color used for drawing. |
| backgroundColor | string | "#ffffff" | Canvas background fill color. |
| strokeWidth | number | 2 | Stroke width used for drawing. |
| className | string | - | Optional wrapper class name. |
Installation
1
Install dependencies
Install the required packages for the component.
Terminal
Loading code…
2
Copy the component
Copy and paste the component code into your project.
Component
Loading code…
3
Update imports
Import and use the component in your project.
Usage
Loading code…