How to On Screen Signature Capture with React

How to On Screen Signature Capture with React

On-Screen Signature Capture with React

Introduction

Sometimes, we need to capture the user's signature using screen itself, like using touch pen, mouse or any other device which is compatible with like a kiosk where we need to capture the customer signature for the verification purpose or something like that.

For this requirement, different possibilities are there to implement such a thing and one of those is an HTML canvas where we can draw the free-hand drawing. Similarly, in React, there is a package named react-canvas-draw, which indirectly uses the canvas for drawing surface.

This package contains the different props and functions so that we can implement the feature very quickly. This is not compulsory to use this package but it will help you to implement such things without much complexity.

There are different operations supported as given below.

  • Draw on canvas
  • Clear canvas drawing
  • Save data in a form of a picture or any significant object
  • Undo the last drawing object
  • Load the previously saved data

Prerequisites

Node 8.10.0 or a later version is required.

In order to work with this project, we need to create a new project using create-react-app, and if you don't have already installed the package, then execute the below npm command.

npm install -g create-react-app  

After the installation of the above package, now we can create our new React app using the below command.

// If using npm 5.1 or earlier  
create-react-app DemoApp  
  
// If using npm > 5.1  
npx create-react-app DemoApp   

Then, we need to install the react-canvas-draw npm package by using the below command.

npm install react-canvas-draw --save  

Our next step is to create the new file named Demo.js and replace the following lines of code.

// Demo.js  
  
import React, { Component } from 'react';  
import CanvasDraw from "react-canvas-draw";  
  
export class Demo extends Component {  
  
  render() {  
    return (  
      <div>  
        <CanvasDraw   
        ref={canvasDraw => (this.myCanvas = canvasDraw)}  
        />  
        <button  
            onClick={() => {  
              this.myCanvas.clear();  
            }}  
        >Clear  
        </button>  
      </div>  
    );  
  }  
}  

In this file, i have imported the package react-canvas-draw, and used that inside the render() method. Keep in mind that this package indirectly implements the HTML canvas to draw anything. We can also clear those drawing objects or undo the previos drawing objects.

Now, open the index.js file and use your Demo.js file in order to render the actual signature component.

import React, { Component } from 'react';  
import { render } from 'react-dom';  
import './style.css';  
// Our re-usable canvas component  
import { Demo } from './Demo';  
  
class App extends Component {  
  
  render() {  
    return (  
      <div>  
        <h2>On-Screene Signature using React</h2><hr/>  
        <Demo />  
      </div>  
    );  
  }  
}  
  
render(<App />, document.getElementById('root'));  

The index component is our root component, from where we are going to render our separate component. Now, let's run our app and see how it looks like. For that,  use the command npm start.

As you can see, I am able to draw the signature canvas using a mouse and at the same time, we can also remove our signature or any other drawing object.

Conclusion

This kind of functionality can be pretty easy to implement using HTML canvas where we can draw different objects. Also, we are able to draw different shapes, text, curves, and many more objects.

Thank for reading!

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Hire React Js Developer from Expert React JS Development Company

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...

Are you looking to hire React JS developer from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team of expert React JS developers, you can hire them on an hourly, weekly or monthly basis for the successful completion of your dream project.

Difference between AngularJS, React, Ember, Backbone, and Node.js.

The most common thing between all of them is that they are Single Page Apps. The SPA is a single page where much of the information remains the same and only some piece of data gets modified when you click on other categories/option.