Javascript Signature Pad

JavaScript Signature Pad Docs

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The LemonadeJS Signature Pad is a lightweight, responsive JavaScript component for capturing signatures via mouse or touch, compatible with Vanilla JavaScript, React, Vue, Angular, and Web Components.

Features

- Lightweight: The lemonade signature pad is only about 2 KBytes;
- Customizable: Easily configure size, line thickness, and instructions to suit your application needs.
- Integration: It can be used as a standalone library or integrated with any modern framework;

Getting Started

You can install using NPM or using directly from a CDN.

$3

To install it in your project using npm, run the following command:

``

bash

$ npm install @lemonadejs/signature





$3



To use data grid via a CDN, include the following script tags in your HTML file:

html





$3



Quick example with Lemonade

javascript

import Signature from "@lemonadejs/signature";



export default function Component() {

    const self = this;

    self.width = 400;

    self.height = 200;

    self.value = [];



    return

value="{{self.value}}"
width="{{self.width}}"
height="{{self.height}}"
instructions="Please sign this document" />

;

}





ReactJS Signature Pad Plugin

jsx

import React, { useRef } from "react";

import Signature from "@lemonadejs/signature/dist/react";



export default function App() {

    const signature = useRef();

    const width = 400;

    const height = 200;

    const value = [];

    return (

        <>

            

        

    );

}





VueJS Signature Pad Plugin

vue





Web-Component Signature Pad

html





$3



| Attribute               | Description                                                          |

|-------------------------|----------------------------------------------------------------------|

|

value?: Array

         | The value represents the painted point's position.                   |

|

width?: Number

        | The width of the signature pad.                                      |

|

height?: Number

       | The height of the signature pad.                                     |

|

instructions?: String

 | The instruction text. It appears at the bottom of the signature pad. |

|

line?: Number

         | The size of each painted point.                                      |

|

disabled?: Boolean

    | Signature is disabled if true.                                       |

|

getValue: Function

    | Gets the value array.                                                |

|

setValue: Function

    | Sets the internal state value.                                       |

|

getImage: Function` | Gets the image based on the value. |

$3

| Event | Description |
|-----------|-----------------------------------------|
| onchange? | When the value of the component changes |
| onload? | When the component completes loading |

License

The LemonadeJS signature pad is released under the MIT.

Other JavaScript Plugins

- jSuites - JavaScript Plugins
- JavaScript Data Grid