NonnySignature is an easy-to-use JavaScript-based library that helps you manage user signatures in the front-end. It provides a flexible solution for both React and vanilla JavaScript projects.
This library can be installed using either NPM or CDN.
- using NPM
npm i nonnysignature- using CDN
<script src="https://Coding-Nonny.github.io/NonnySignature/lib/NonnySignature.js"></script>import NonnySignature from "nonnysignature";To initialize NonnySignature, you need to provide the class of the parent div that will hold the signature pad. You can use our default template or your own.
- HTML
<body>
<div class="mypad"></div>
</body>- JAVASCRIPT
const signaturePad = new NonnySignature(".mypad", false);- The first parameter is the class of the parent div that will hold the signature pad (in this case,
.mypad). - The second parameter is a boolean that determines whether to use the default template (
false) or your own (true).
We have also provided a flexible React component that you can use in your React development.
import SignaturePad from 'nonnysignature/react'
export default function App(){
<SignaturePad id="mypad"></SignaturePad>
}- The id prop sets the ID for the current signature pad (in this case,
mypad).
To save the signature image, you first need to add a Save button using the .nonny-save-png class name for png, .nonny-save-svg class name for svg. You can either use our default template or your own.
- HTML
<div class="mypad">
<canvas width="400" height="200"></canvas>
<button class="nonny-save-png">Save png</button>
<button class="nonny-save-svg">Save svg</button>
</div>- REACT
<SignaturePad id="mypad">
<canvas width="400" height="200"></canvas>
<button className="nonny-save-png">Save png</button>
<button className="nonny-save-svg">Save svg</button>
</SignaturePad>Then, set the onSave method or props.
Setting The Method
- You can use
nonny-save-callbackclass name on a button to initialize the onSave method.
signaturePad.onSave((imageData) => console.log(imageData.toImage('png', 1)));Setting Props
<SignaturePad id="mypad" onSave={(imageData) => console.log(imageData.toImage('png', 1))}>
...Your custom template
</SignaturePad>- The
onSavemethod takes a callback function as its parameter. - The callback function takes an ImageData object as its parameter.
- The ImageData object has a few methods, including
toImage(imageType, quality)andtoSvg(). - The toImage method takes two arguments: imageType (currently supported types are
png,jpeg, andwebp) and quality (a number between0and1, with0being the poorest quality and1being the maximum quality). - The
toSvg()method returns signature as svg.
Note: If you click the save button without using the onSave method, the canvas will be downloaded as an image.
| Name | Function | Class Name |
|---|---|---|
| Clear button: | The clear button is used to clear the canvas. You can add a clear button to the signature pad using the class name nonny-clear. |
nonny-clear |
| Size Up button: | This helps to increase the size of the canvas stroke. You can add a button to increase the size of the stroke using the class name nonny-sizeup. |
nonny-sizeup |
| Size Down button: | This helps to decrease the size of the canvas stroke. You can add a button to decrease the size of the stroke using the class name nonny-sizedown. |
nonny-sizedown |
| Undo button: | This removes strokes from the canvas until none is left, you can recover strokes using the redo button. You can add an undo button using the class name nonny-undo. |
nonny-undo |
| Redo button: | This retrieves strokes removed by the undo button. You can add a redo button using the class name nonny-redo. |
nonny-redo |
| Background color input: | You can add an input of type color to change the background color of the signature pad. The input should have the class name nonny-bgcolor and the default background color is white value="#FFFFFF". |
nonny-bgcolor |
| Stroke color input: | You can add an input of type color to change the stroke color of the signature pad. The input should have the class name nonny-color and default color is black value="#000000". |
nonny-color |
- In REACT
you can use the buttons like this
<SignaturePad id="mypad">
<canvas width="400" height="200"></canvas>
<button className="nonny-clear">clear</button>
<input type="color" className="nonny-color" value="#000000">
</SignaturePad>For working example, click here.
- Or check the example for handling double signature
clientandmanagementclick here
If you encounter any issues or have any suggestions, please create an issue in the GitHub repository. Made With Love