How To Build a Digital Signature Pad in React

A digital signature pad is an area that captures a person’s handwritten signature on a device which helps in signing documents, contracts, and other paperwork without having to write and scan it into our computer manually.

This tutorial will teach us how to create a digital signature pad in React using React signature canvas.

 The code for this tutorial is available on GitHub.

While You Are Here, Why Not Learn More About The React useEvent() Hook And How To Use It?

Prerequisites

To follow along with this tutorial, you should be familiar with React and have Node installed on your system.

Introduction To React Signature Canvas

React signature canvas is a wrapper component around signature_pad based on HTML5 canvas for drawing signatures. To get started with it after its installation is just to import the SignatureCanvas and render it in our app like the following:

import "./App.css"; import SignatureCanvas from "react-signature-canvas"; function App() { return ( <div className="app"> <SignatureCanvas penColor="blue" canvasProps={{ width: 500, height: 200 }} /> </div> ); } export default App;

Above by using the penColor and canvasProps we have changed the color of the stroke on the signature canvas to blue and set the width and height of the canvas. Aside from the above, there are other props and methods included for customizing, editing, and managing the canvas as well as the signed signature. To create a functional signature pad in this tutorial, we won’t be using all of the available props and methods.

Let’s look at the ones we will use in this tutorial.

The following are the props we will use.

• penColor: This is used to specify the color of the signature.
• canvasProps: An object to specify properties to be passed as attributes to the <canvas /> element.

The following are the API methods we will use.

• clear(): This is used to clear the canvas
• getTrimmedCanvas(): This is used to remove all white spaces from the canvas.
• toDataURL(mimetype, encoderOptions): This can be used to covert the signature image to a data URL which can then be downloaded as a file or used to be displayed on the screen.

Setting Up React

To create a new React app, type the following commands in the terminal:

npx create-react-app signature-pad

Here our app’s name is signature-pad, but we can give it any name we want as long as it’s not a restricted npm name. After the installation is complete, change into the newly created directory, let’s install the needed dependency. We can do this using the following commands:

cd signature-pad npm i react-signature-canvas

Now, let’s clean up our app a little bit. Open the created app in the src directory and clean up the App.js file to look like the following:

import "./App.css"; function App() { return <div className="app"></div>; } export default App;

Next, remove all the styling in the App.css file. Now we can start the app with the npm start command in the terminal.

Building a Digital Signature Pad

For the signature pad, we will be able to sign a signature, change the color used to sign, clear the signature if it’s not correct, remove the background attached to the signature, and also be able to download it on our system. Below is a GIF that shows what we will build in this section.

Let’s get started.

Create a Pad To Draw the Signature

Let’s start by creating the modal that will display the signature pad. To do this, head over the App.js file in the src directory and modify it to look like the following:

import { useState } from "react"; import "./App.css"; function App() { const [openModel, setOpenModal] = useState(false); return ( <div className="app"> <button onClick={() => setOpenModal(true)}>Create Signature</button> <br /> {openModel && ( <div className="modalContainer"> <div className="modal"> <div className="modal__bottom"> <button onClick={() => setOpenModal(false)}>Cancel</button> </div> </div> </div> )} </div> ); } export default App;

In the above code, we have created a state default to false which are using the conditional render the modal. On clicking on the Create Signature button the state will the true and the modal will appear. Next, let’s add some styling to make it look like a proper modal.

In the App.css file add the following styling:

.app { text-align: center; margin-top: 30px; } .app button { padding: 10px 20px; background-color: inherit; border: 1px solid gray; } .app button:hover{ background-color: gray; color: white; } .modalContainer { position: fixed; width: 100vw; height: 100%; display: flex; top: 0; bottom: 0; left: 0; right: 0; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.4); } .modal{ width: 90%; max-width: 500px; border: 5px; padding: 10px; background-color: white; box-sizing: border-box; } .modal__bottom { text-align: right; margin-top: 10px; } .modal__bottom button { padding: 6px 10px; }

Now, when we go over to our app in the browser and click on the Create Signature button we will see the following:

Next, let’s create the signature pad, displaying it with the created modal. To do this, In the App.js file, add the following import:

import SignatureCanvas from 'react-signature-canvas'

Next, add the following lines of code before the div with the class name of modal__bottom.

<div className="sigPadContainer"> <SignatureCanvas penColor="black" canvasProps={{ className: "sigCanvas" }} /> </div>;

Above we have rendered SignatureCanvas giving it a pen color of black and a class name. With this when we now open the modal in our app, a pad will be displayed where we can draw a signature.

Let’s add some styling to make it look better. In the App.css file add the following lines of code.

.sigPadContainer { background-color: rgb(238, 235, 235); padding: 0 10px 10px; } .sigCanvas{ width: 100%; height: 200px; }

Adding Signature Pad Control Functionalities

Here, we will be adding options for clearing drawn signatures, changing the color of the pen for drawing a signature and removing white spaces from the canvas a signature is drawn on so that only the drawn signatures is left. Let’s get to it.

Let’s start by adding a clear option to our signature pad. For this, we will be using the clear API method. The access the API methods we need to create a reference to SignatureCanvas. Let’s do that.

In the App.js file add the following import:

import { useRef } from 'react'

Next, add the following lines of code in the App component.

const sigCanvas = useRef()

Next, modify the SignatureCanvas component to look like the following:

<SignatureCanvas penColor="black" canvasProps={{ className: "sigCanvas" }} ref={sigCanvas} />;

Now, we can start accessing the API methods using sigCanvas.current. To add the clear option, add the following line of code after the SignatureCanvas component.

<hr/> <button onClick={() => sigCanvas.current.clear()}>Clear</button>

Next. add the following styling to the App.css file.

.sigPadContainer hr{ margin-bottom: unset; background-color: gainsboro; } .sigPadContainer button { border: none; margin-left: auto; color: rgb(78, 75, 75); padding: 0; display: block; margin-top: 5px; } .sigPadContainer button:hover { background-color: unset; color: black; }

With this, a clear button for clear will be added to our signature pad. 

Now let’s add the option to change the color of the pen used in drawing the signature. To do this, first, add the following lines of code after the sigCanvas ref in the App component.

const [penColor, setPenColor] = useState("black"); const colors = ["black", "green", "red"];

In the above code, we have created a penColor state default to black to hold the current value of the pen color to be passed to SignatureCanvas. We have also defined an array of colors that we want to switch.

Next, add the following lines of code before the div with the class name of sigPadContainer.

<div className="sigPad__penColors"> <p>Pen Color:</p> {colors.map((color) => ( <span key={color} style={{ backgroundColor: color, border: `${color === penColor ? `2px solid ${color}` : ""}`, }} onClick={() => setPenColor(color)} ></span> ))} </div>;

Next., modify the SignatureCanvas component to look like the following:

<SignatureCanvas penColor={penColor} canvasProps={{ className: "sigCanvas" }} ref={sigCanvas} />;

Now, add the following styling in the App.css file.

.sigPad__penColors{ margin-bottom: 10px; } .sigPad__penColors p{ display: inline-block; margin-right: 5px; } .sigPad__penColors span{ padding: 0px 9px; border-radius: 100%; margin-right: 5px; }

With this, we can start between different colors for drawing signature.

Next. let’s add the option for removing all white spaces from the canvas and displaying the created signature. By removing spaces only the signature will be left, we can then use it to sign any color of the document. For this, we will be using the getTrimmedCanvas() API method.

First, add the following state after the penColor state in the App component.

const [imageURL, setImageURL] = useState(null);

We will use this to hold the URL of the signatures after removing the white spaces so that we can display it as an image.

Next, add the following function after the colors array.

const create = () => { const URL = sigCanvas.current.getTrimmedCanvas().toDataURL("image/png"); setImageURL(URL); setOpenModal(false); };

Next, add the following lines of code after the Cancel button within the div the class name of modal__bottom.

<button className="create" onClick={create}> Create </button>;

Next, add the following lines of code after the Create Signature button.

<br />; { imageURL && ( <> <img src={imageURL} alt="signature" className="signature" /> </> ); }

Now, add the following styling in the App.css file.

.modal__bottom .create{ margin-left: 10px; background-color: rgb(126, 119, 119); color: white; } .signature { width: 200px; height: 70px; margin-top: 20px; box-shadow: 0 0 4px 2px gainsboro; padding: 10px; object-fit: contain; }

With this, in our app there will be a Create at the button of our signature pad and when we click it white spaces will be removed and an image of the signature will be displayed on the screen.

Downloading Created Signature

There is no inbuilt API method for downloading a signature in the React signature canvas package so we will have to create it ourselves. Doing this is quite straightforward, we just need to use set the href and download attribute of an a tag to the appropriate values and then click the link.

First, add the following function after the create function in the App component.

const download = () => { const dlink = document.createElement("a"); dlink.setAttribute("href", imageURL); dlink.setAttribute("download", "signature.png"); dlink.click(); };

In the above code we have created a function which when called creates an a tag, set’s its href attribute to the URL of the signature, set’s the download attribute to a name for the image when it is downloaded, and then automatically clicks the created link.

Now we let’s add a button to call the above function. Add the following lines of code after the img tag with a class name of signature.

<br /> <button onClick={download} style={{padding: '5px', marginTop: '5px'}} >Download</button>

With this, we can now download the created signature by clicking on the download button which will be displayed after creating a signature.

Conclusion

In this tutorial we have learned how to create a digital signature pad using the React signature canvas package. Aside from the features and functions covered in this tutorial, there are others we can also look into like, changing the background of the canvas used to draw the signature, covert the signature to an array of point groups rather than a data URL, etc.