react-esigning-library v1.0.13
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
Dependencies
Usage
import React from 'react'
import ReactDOM from 'react-dom'
import { EsignPdf } from react-esigning-library
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.