Post
Ask Question

How To Create A Signature Pad In ReactJS Application

Introduction

In this article, we will learn how to create a signature pad in the Reactjs application.

Prerequisites

  • Basic knowledge of ReactJS
  • Visual Studio Code
  • Node and NPM installed
  • Bootstrap

Create a React.js Project

Let's create a new React project by using the following command.

npx create-react-app demolist

Open this project in Visual Studio Code and install the following package using the following command.

npm install @syncfusion/ej2-react-inputs –save

Now install Bootstrap by using the following command.

npm install bootstrap --save

Now, open the index.js file and add import Bootstrap. 

import 'bootstrap/dist/css/bootstrap.min.css';

Now go to the src folder and create a new component, 'SignDemo.js'. Add the following code to this component.

import React from 'react'
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import './App.css';
function SignDemo() {
  return (
    <div className="col-lg-12 control-section">
      <div id="signature-control">
        <div className='e-sign-heading'>
          <span id="signdescription">Sign below</span>
        </div>
        <SignatureComponent id="signature" ></SignatureComponent>
      </div>
    </div>

  )
}
export default SignDemo

Add a reference of this component in an app.js file.

import logo from './logo.svg';
import './App.css';
import MulitselectDrop from './MulitselectDrop'
function App() {
  return (
    <div className="App">
      <MulitselectDrop></MulitselectDrop>
    </div>
  );
}
export default App;

Now, run the project by using the 'npm start' command, and check the result.

Now, add your signature using your mouse and check it.

We can also save and clear the signature. Add the following code in the SignDemo.js componetnt.

import React from 'react'
import {Signature, SignatureComponent } from '@syncfusion/ej2-react-inputs';
import './App.css';
import { getComponent, closest } from '@syncfusion/ej2-base';
function SignDemo() {
   function  clearBtnCreated() {
    document.getElementById('signclear').addEventListener('click', clearButtonClick);
  }
  function saveButtonCreated() {
    document.getElementById('signsave').addEventListener('click', saveBtnClick);
  }
  function  saveBtnClick() {
    let signature = getComponent(document.getElementById('signature'), 'signature');
    signature.save();
  }
  function clearButtonClick() {
    let signature = getComponent(document.getElementById('signature'), 'signature');
    signature.clear();
  }
  return (
    <div class="container">
      <div class="row" className="hdr">
        <div class="col-sm-12 btn btn-info">
        How to create a Signature pad in ReactJS Application
        </div>
      </div>
      <div class="row">
      <div className="col-lg-2"></div>
      <div className="col-lg-8 control-section">
        <div id="signature-control">
          <div className='e-sign-heading'>
            <span id="signdescription">Sign Here</span>
          </div>
          <SignatureComponent id="signature" ></SignatureComponent>
          <button style={{margin:"10px"}} class="btn btn-success" id="signsave" onClick={saveButtonCreated} >Save</button>
          <button class="btn btn-success" id="signclear" onClick={clearBtnCreated} >Clear</button>
        </div>
      </div>
      <div className="col-lg-2"></div>
    </div>
    </div>
  )
}
export default SignDemo

Run the project and check.

Click on save button to save the sign. If you click on the clear button it will clear the sign.

Summary

In this article, we learned how to create a signature in Reactjs application.


Similar Articles