react-signature-pad-wrapper

The SignaturePad component handles canvas sizing in two ways:

1. Fixed Size: Pass explicit width and height props (in pixels).
2. Responsive: Omit the width and height props. The component will automatically update the canvas size on window resize using a debounced handler.

Note: Changing canvas dimensions normally erases existing content. To prevent this, use the redrawOnResize prop.

// Fixed size
<SignaturePad width={500} height={500} />

// Responsive (omitting width/height)
<SignaturePad />

// Responsive with content preservation
<SignaturePad redrawOnResize />

Install the package using npm to use the React wrapper for signature pad in your project.

npm install --save react-signature-pad-wrapper

To run the included responsive sketch pad example, follow these steps to install dependencies and build the example project.

```shell
npm install
cd example && npm install && npm run build

After building, open example/index.html in your browser.

Import the SignaturePad component and use it within your React render method. You can pass configuration options via the options prop or interact with the underlying signature pad instance using a ref.

import SignaturePad from 'react-signature-pad-wrapper';

// Using options prop
<SignaturePad options={{minWidth: 5, maxWidth: 10, penColor: 'rgb(66, 133, 244)'}} />

// Using ref for runtime control
<SignaturePad ref={this.signaturePadRef} />

By using a ref, you can access the underlying signature_pad instance methods and properties at runtime. This allows you to clear the pad, check if it is empty, or update drawing parameters dynamically.

// Call an instance method
this.signaturePad.clear();
this.signaturePad.isEmpty();

// Get/set an object property
this.signaturePad.minWidth = 5;
this.signaturePad.maxWidth = 10;
this.signaturePad.penColor = 'rgb(66, 133, 244)';

When using a responsive layout (omitting width and height), setting the redrawOnResize prop to true will attempt to preserve the current drawing. The component saves the canvas content to a base64 string before resizing and reloads it afterward.

Warning: Repeatedly saving and loading image data during resize events can cause rapid degradation of drawing quality.

<SignaturePad redrawOnResize />

To work with the raw mathematical representation of the signature, use toData() to get an array of PointGroup objects, and fromData(data: PointGroup[]) to restore it.

// Save raw data
const points = signaturePadRef.current.toData();

// Later, restore raw data
signaturePadRef.current.fromData(points);

Use the following methods on the SignaturePad instance to retrieve the signature data:

• toDataURL(type?: string, encoderOptions?: number): Returns the signature as a data URL (e.g., 'image/png').
• toSvgDataUrl(encoderOptions?: ToSVGOptions): Returns the signature as an SVG data URL.
• toSVG(svgOptions?: ToSVGOptions): Returns the signature as an SVG string (not base64 encoded).

const pngDataUrl = signaturePadRef.current.toDataURL('image/png');
const svgString = signaturePadRef.current.toSVG();

You can restore a signature using the following methods:

• fromDataURL(dataUrl: string, options: FromDataUrlOptions = {}): Draws a signature from a data URL.
• fromData(data: PointGroup[]): Draws a signature from an array of point groups.

// Restore from a PNG data URL
signaturePadRef.current.fromDataURL(savedPngUrl);

The SignaturePad component exposes several properties as getters and setters on its instance, allowing you to modify the drawing behavior dynamically:

• dotSize: Set the radius of a single dot.
• minWidth: Set the minimum width of a line.
• maxWidth: Set the maximum width of a line.
• throttle: Set the throttle for drawing the next point (in ms).
• backgroundColor: Set the color used to clear the background.
• penColor: Set the color used to draw the lines.
• velocityFilterWeight: Set the weight used to modify new velocity based on previous velocity.

// Example of changing pen color via ref
signaturePadRef.current.penColor = 'blue';
signaturePadRef.current.dotSize = 2;

You can access the original signature_pad instance via the instance getter on the SignaturePad component. This allows you to call any method available in the base signature_pad library that might not be explicitly wrapped by this component.

// Assuming you have a ref to the SignaturePad component
const signaturePadInstance = signaturePadRef.current.instance;