Create A Digital Signature In ReactJS

In this article, we will learn how to create a digital signature in reactjs.

–First of all, we have to create react application.

We have to create a digital signature using the react-sketch-canvas package.

Then add react-sketch-canvas npm

npm i  react-sketch-canvas

-Now add the below code in app.js file :

import './App.css';
import * as React from 'react';
import { useState } from 'react';
import { ReactSketchCanvas } from 'react-sketch-canvas';

function App() {
  const styles = {
    border: '0.0625rem solid #9c9c9c',
    borderRadius: '0.25rem',
  };
 const  canvas = React.createRef();
const [image, setImage] = useState()
  return (
    <>
      <ReactSketchCanvas
        style={styles}
        width="600"
        height="400"
        strokeWidth={4}
        strokeColor="black"
        ref={canvas}
      />

      <button
        onClick={() => {
          console.log(canvas)
          canvas.current.exportImage("png")
            .then(data => {
              console.log(data);
              setImage(data)
            })
            .catch(e => {
              console.log(e);
            });
        }}
      >
        Get Image
      </button>
      <button
        onClick={() => {
          canvas.current.clearCanvas()
        }}
      >
        Clear Image
      </button>
      <img src = {image} />
    </>
  );
}

export default App;

-Using react-sketch-canvas you have to customize the style.

output: