React Digital Signature
A React signature component using signature_pad and based on other libraries of the same functionality.
Installation
You can install the latest release using npm:
npm install --save react-digital-signature
or Yarn:
yarn add react-digital-signature
Usage TS
import { useRef } from 'react'
import './App.css'
import DigitalSignature, { SignaturePad } from 'react-digital-signature'
function App() {
const ref = useRef<SignaturePad>()
const handleCLear = () =>{
ref.current?.clear()
}
return (
<div className="App">
<button onClick={handleCLear}>Clear</button>
<br />
<br />
<DigitalSignature
signaturePadRef={ref}
canvasProps={{
style:{
background:"white",
border:"1px solid black"
}
}}
/>
</div>
)
}
export default App
Usage JS
import { useRef } from 'react'
import './App.css'
import DigitalSignature from 'react-digital-signature'
function App() {
const ref = useRef()
const handleCLear = () =>{
ref.current?.clear()
}
return (
<div className="App">
<button onClick={handleCLear}>Clear</button>
<br />
<br />
<DigitalSignature
signaturePadRef={ref}
canvasProps={{
style:{
background:"white",
border:"1px solid black"
}
}}
/>
</div>
)
}
export default App
<DigitalSignature />
Props Prop | Type | Default Value | Description |
---|---|---|---|
velocityFilterWeight | number | 0.7 | Controls the weight/impact of velocity on the pen stroke. |
minWidth | number | 0.5 | Minimum width of the pen stroke. |
maxWidth | number | 2.5 | Maximum width of the pen stroke. |
minDistance | number | 5 | Minimum distance between two points to be considered as a valid stroke. |
dotSize | number or function | () => (min + max)/2 | The size of the dot that is placed at the beginning and end of each stroke. |
penColor | string | 'black' | Color of the pen stroke. |
throttle | number | 16 | The time in milliseconds between each mouse/touchmove event that is considered as a new stroke. |
onEnd | function | A callback function that is called when a stroke ends. | |
onBegin | function | A callback function that is called when a stroke begins. | |
canvasProps | object | Props that are directly passed to the underlying <canvas /> element. |
|
backgroundColor | string | "rgba(0,0,0,0)" | Background color of the canvas element. |
eraseOnResize | bool | true | Whether or not the canvas should be cleared when the window resizes (Usually used on ios devices and browser with bottom navigation bar variable). |
Note: All props, except for canvasProps and eraseOnResize, are passed through to signature_pad as its options. If you want know more of the props of the component you can check the original docs
API
-
refDigitalPad.toDataURL();
Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters) -
refDigitalPad.toDataURL("image/jpeg");
save image as PNG -
refDigitalPad.toDataURL("image/jpeg", 0.5);
save image as JPEG with 0.5 image quality -
refDigitalPad.toDataURL("image/svg+xml");
save image as SVG data url -
refDigitalPad.toSVG();
Return svg string without converting to base64 -
refDigitalPad.toSVG({includeBackgroundColor: true});
add background color to svg output -
refDigitalPad.fromDataURL("data:image/png;base64,iVBORw0K...");
Draws signature image from data URL (mostly uses https://mdn.io/drawImage under-the-hood) -
refDigitalPad.fromDataURL("data:image/png;base64,iVBORw0K...", { ratio: 1, width: 400, height: 200, xOffset: 100, yOffset: 50 });
Draws signature image from data URL and alters it with the given options -
const data = refDigitalPad.toData();
Returns signature image as an array of point groups -
refDigitalPad.fromData(data);
Draws signature image from an array of point groups -
refDigitalPad.fromData(data, { clear: false });
Draws signature image from an array of point groups, without clearing your existing image (clear defaults to true if not provided) -
refDigitalPad.clear();
Clears the canvas -
refDigitalPad.isEmpty();
Returns true if canvas is empty, otherwise returns false -
refDigitalPad.off();
Unbinds all event handlers -
refDigitalPad.on();
Rebinds all event handlers
You can use the API using a useRef() hook for example:
function App() {
const refDigitalPad = useRef()
const handleCLear = () =>{
refDigitalPad.current?.clear()
}
return (
<div className="App">
<button onClick={handleCLear}>Clear</button>
<br />
<br />
<DigitalSignature
signaturePadRef={refDigitalPad}
canvasProps={{
style:{
background:"white",
border:"1px solid black"
}
}}
/>
</div>
)
}
Example
If you want execute the example of the project:
cd example && npm install && npm run start
and navigate to http://localhost:1234/