@lemonadejs/signature

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.

npm Installation

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

$ npm install @lemonadejs/signature

CDN

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

<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

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

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

<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

<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
• JavaScript Data Grid