React E-esigning for Pdf

Introduction

A react esigning component library where you can sign visually any position on pdf you specified .

You can sign whether by drawing signature through signature pad or can generate your own signature by typing text in the input field .

This library offers you to sign at any page by defining positions (X,Y) in the array.

Installation

npm install react-esigning-library-lt

Dependencies

• react-signature-canvas
• reactjs-popup
• pdf-lib

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import { EsignPdf } from 'react-esigning-library-lt'


let testArray = [
    {
      pageNum: 0,
      positionX: 70,
      positionY: 80,
      type: "signature",
    },
    {
      pageNum: 0,
      positionX: 70,
      positionY: 80,
      signature: "Adam",
      type: "text",
    },
  ];
  const submitPdf = (data) => {
  console.log("data", data);
};
ReactDOM.render(
   <EsignPdf
      backgroundColor="#eded"
      signatureArray={testArray}
      submitPdfFunc={submitPdf}
      buttonStyle={{
        padding: "10px",
        width: "100%",
        cursor: "pointer",
        border: "1px solid",
        borderRadius: "15px",
        fontSize: "15px",
        backgroundColor: "#87ce",
        color: "#fff",
      }}
      url={"YOUR_PDF_URL"}
      generateButtonStyle={{
        padding: "10px",
        width: "35%",
        cursor: "pointer",
        border: "1px solid",
        borderRadius: "15px",
        fontSize: "15px",
        backgroundColor: "#87ce",
        color: "#fff",
      }}
      inputStyle={{ padding: "10px", marginRight: "5px" }}
    />
  document.getElementById('react-container')
)

Props Description

• backgroundColor

Add your own background color to components like

• buttonStyle

you can write your own css for buttons.

• url

add your url for pdf, where you want to sign on.

• inputStyle

add your own css to input field required in the generating signatures.

• submitPdfFunc

It's a callback which will hold the visual sign pdf in base64, after you submit pdf . This can be used if you want to digitally sign your pdf from certified authority.

• signatureArray

This array should include the format which is defined in the example, Here you can specified the positionX and positionY along with the pageNumber on which you want to sign on. In addition to signature, you can add your custom text if want to add in your pdf .

Props

| Name | Type | Required | Default | | ----------------- | ------ | -------- | ------------------------------------------ | | backgroundColor | String | No | '#eee' | | buttonStyle | Object | No | none | | url | String | Yes | none | | inputStyle | Object | No | {{ padding: "10px", marginRight: "5px" }} | | submitPdfFunc | Func | Yes | none | | signatureArray | Array | Yes | [] |

License

This package is available under the MIT license.