https://github.com/siamahnaf/react-signature-pad
A react wrapper component for signature pad integration into react with typescript and latest version of signature pad. It supports all kind of essentials API and options.
https://github.com/siamahnaf/react-signature-pad
digital digital-signature e-sign e-signature react-signature-pad sign signature signature-pad
Last synced: about 2 months ago
JSON representation
A react wrapper component for signature pad integration into react with typescript and latest version of signature pad. It supports all kind of essentials API and options.
- Host: GitHub
- URL: https://github.com/siamahnaf/react-signature-pad
- Owner: siamahnaf
- License: mit
- Created: 2025-03-14T14:30:19.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-14T14:36:18.000Z (2 months ago)
- Last Synced: 2025-03-14T14:40:32.408Z (2 months ago)
- Topics: digital, digital-signature, e-sign, e-signature, react-signature-pad, sign, signature, signature-pad
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@siamf/react-signature-pad
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @siamf/react-signature-pad
A react wrapper component for signature pad integration into react with typescript and latest version of signature pad. It supports all kind of essentials API and options.
# Installation
```bash
$ npm i @siamf/react-signature-pad
```
# Usage
```javascript
import { SignaturePad } from "@siamf/react-signature-pad";
//SignaturePad Component
```
### How to use API?
```javascript
import { SignaturePad, SignatureCanvasRef } from "@siamf/react-signature-pad";
import { useRef } from "react";
const MyComponent = () => {
const ref = useRef(null);
const getDataUrl = () => {
if (ref.current) {
const dataUrl = ref.current.toDataURL();
console.log('Signature as PNG:', dataUrl);
}
};
//You can use All API by calling ref object;
return (
Download Signature
)
}
export default MyComponent;
````
# Props
Name
Types
Description
dotSize
number
Radius of a single dot. Also the width of the start of a mark.
minWidth
number
Minimum width of a line. Defaults to 0.5.
maxWidth
number
Maximum width of a line. Defaults to 2.5.
throttle
number
Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
minDistance
number
Add the next point only if the previous one is farther than x pixels. Defaults to 5.
backgroundColor
string
Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
penColor
string
Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
velocityFilterWeight
number
Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
canvasContextOptions
CanvasRenderingContext2DSettings
Part of the Canvas API, provides the 2D rendering context for the drawing surface of a canvas element. It is used for drawing shapes, text, images, and other objects
canvasProps
HTMLCanvasElement
Direct canvas html element props
clearOnResize
boolean
Whether or not the canvas should be cleared when the window resizes
## API Method
Name
Types
Default
clear()
() => void
Clear canvas element
isEmpty()
() => boolean
Whether canvas empty or not
toDataURL()
(type?: string, encoderOptions?: number):string
Get signature Data URL
toFile()
(type?: string, encoderOptions?: number):File
Get Signature Image File
toSVG()
(options?: ToSVGOptions)
Get the svg element
fromDataURL()
(dataUrl: string, options?: { ratio?: number; width?: number; height?: number; xOffset?: number; yOffset?: number }) => Promise
Writes a base64 image to canvas
toData()
() => PointGroup[]
Returns signature image as an array of point groups
fromData()
(pointGroups: PointGroup[], options?: { clear?: boolean }) => void
Draws signature image from an array of point groups
getCanvas()
() => HTMLCanvasElement
Get HTML Canvas Element
getSignaturePad()
() => SignaturePad
Get the whole Signature Pas Instance
on()
() => void;
Rebinds all event handlers
off()
() => void;
Unbinds all event handlers
# Stay in touch
- Author - [Siam Ahnaf](https://www.siamahnaf.com/)
- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)
- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)