# Javascript Signature Pad

[JavaScript Signature Pad Docs](https://lemonadejs.net/docs/plugins/signature)

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.

### npm Installation

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

```bash
$ npm install @lemonadejs/signature
```

### CDN

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

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/signature/dist/index.min.js"></script>
```

### Configuration

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 `<Signature
        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 (
        <>
            <Signature ref={signature} value={value} width={width} height={height} instructions="Please sign this document" />
        </>
    );
}
```

VueJS Signature Pad Plugin

```vue
<template>
  <Signature ref="signature" :value="[]" :width="400" :height="200" instructions="Please sign this document" />
</template>

<script>
import Signature from '@lemonadejs/signature/dist/vue';

export default {
  name: 'App',
  components: {
      Signature,
  },
};
</script>
```

Web-Component Signature Pad

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/signature/dist/index.min.js"></script>
<lm-signature width="400" height="200"></lm-signature>
```

### Attributes

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

### Events

| 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](https://jsuites.net/docs)
-   [JavaScript Data Grid](https://jspreadsheet.com)