react-signature-canvas

What is react-signature-canvas?

The react-signature-canvas package is a React wrapper for the signature_pad library, which allows users to draw smooth signatures on a canvas element. It provides an easy way to integrate signature capture functionality into React applications.

What are react-signature-canvas's main functionalities?

Basic Signature Capture

This feature allows you to capture a signature on a canvas. The pen color is set to black, and the canvas dimensions are specified.

import React from 'react';
import SignatureCanvas from 'react-signature-canvas';

function SignaturePad() {
  return (
    <SignatureCanvas penColor='black' canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />
  );
}

export default SignaturePad;

Clear Signature

This feature allows you to clear the signature from the canvas. A button is provided to trigger the clear action.

import React, { useRef } from 'react';
import SignatureCanvas from 'react-signature-canvas';

function SignaturePad() {
  const sigCanvas = useRef(null);

  const clear = () => {
    sigCanvas.current.clear();
  };

  return (
    <div>
      <SignatureCanvas ref={sigCanvas} penColor='black' canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />
      <button onClick={clear}>Clear</button>
    </div>
  );
}

export default SignaturePad;

Save Signature as Image

This feature allows you to save the signature as an image. The signature is converted to a data URL, which can be used to display or store the image.

import React, { useRef } from 'react';
import SignatureCanvas from 'react-signature-canvas';

function SignaturePad() {
  const sigCanvas = useRef(null);

  const save = () => {
    const dataURL = sigCanvas.current.getTrimmedCanvas().toDataURL('image/png');
    console.log(dataURL);
  };

  return (
    <div>
      <SignatureCanvas ref={sigCanvas} penColor='black' canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />
      <button onClick={save}>Save</button>
    </div>
  );
}

export default SignaturePad;

Other packages similar to react-signature-canvas

react-signature-pad-wrapper

react-signature-pad-wrapper is another React wrapper for the signature_pad library. It offers similar functionality to react-signature-canvas, allowing users to capture, clear, and save signatures. However, it may have different API methods and additional customization options.

react-signature

react-signature is a React component for capturing signatures. It provides a simple interface for drawing, clearing, and saving signatures. Compared to react-signature-canvas, it may have fewer features but can be easier to integrate for basic use cases.

README

React Signature Canvas

A signature pad implementation in React.

This is an unopinionated fork of react-signature-pad that does not impose any styling or wrap any other unwanted elements around your canvas -- it's just a wrapper around a single canvas element! Hence the naming difference.

This fork also allows you to directly pass props to the underlying canvas element, has small API differences, and documents the props you can pass to it.

Installation

npm i -S react-signature-canvas

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import SignatureCanvas from 'react-signature-canvas'

ReactDOM.render(
  <SignatureCanvas penColor='green'
    canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />,
  document.getElementById('react-container')
)

Props

The props of SignatureCanvas mainly control the properties of the pen stroke used in drawing. All props are optional.

• velocityFilterWeight : number, default: 0.7
• minWidth : number, default: 0.5
• maxWidth : number, default: 2.5
• dotSize : number or function, default: (minWidth, maxWidth) => (minWidth + maxWidth) / 2
• penColor : string, default: 'black'

There are also two callbacks that will be called when a stroke ends and one begins, respectively.

• onEnd : function
• onBegin : function

Two additional props are used to control the canvas element. canvasProps are directly passed to the underlying <canvas /> element and backgroundColor is used in the API's clear convenience method (which itself is called internally during resizes)

• canvasProps: object
• backgroundColor : string, default: 'rgba(0,0,0,0)'

API

All API methods require a ref to the SignatureCanvas in order to use and are instance methods of the ref.

<SignatureCanvas ref={(ref) => { this.sigCanvas = ref }} />

• isEmpty() : boolean, self-explanatory
• clear() : void, clears the canvas using the backgroundColor prop
• fromDataURL(base64String) : void, writes a base64 image to canvas
• getCanvas(): canvas, returns the underlying canvas ref. Allows you to modify the canvas however you want or call methods such as toDataURL()
• getTrimmedCanvas(): canvas, creates a copy of the canvas and returns a trimmed version of it, with all whitespace removed.

Example

$ npm start

Navigate to http://localhost:8080/ in your browser and you should be able to see the signature canvas in action.

The source code for this example is found in the example/ directory.