PDF E-Signature

A React component library that allows users to select positions for e-signatures on PDFs and sign documents digitally.

Installation

npm install pdf-e-signature
# or
yarn add pdf-e-signature

Features

• PDF document viewer
• Signature positioning interface
• Multiple signature formats
• Signature storage and management
• PDF document signing

Usage

Basic Example

import React, { useState } from 'react';
import { PDFSignatureSelector, SignPdf } from 'pdf-e-signature';

const SignatureApp = () => {
  const [pdfFile, setPdfFile] = useState(null);
  const [pdfUrl, setPdfUrl] = useState(null);
  const [signaturePositions, setSignaturePositions] = useState([]);
  const [signedPdf, setSignedPdf] = useState(null);
  
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file && file.type === 'application/pdf') {
      setPdfFile(file);
      const fileURL = URL.createObjectURL(file);
      setPdfUrl(fileURL);
      setSignaturePositions([]);
    }
  };
  
  const handleSigningComplete = (signedPdfBlob) => {
    setSignedPdf(URL.createObjectURL(signedPdfBlob));
  };
  
  return (
    <div>
      <input type="file" accept=".pdf" onChange={handleFileChange} />
      
      {pdfFile && (
        <PDFSignatureSelector 
          pdfFile={pdfFile}
          onSave={(e) => {setSignaturePositions(e.signaturePositions) }}
          pdfUrl={pdfUrl}
        />
      )}
      
      {pdfFile && signaturePositions.length > 0 && (
        <SignPdf
          pdfFile={pdfFile}
          pdfUrl={pdfUrl}
          signaturePositions={signaturePositions}
          onSigningComplete={handleSigningComplete}
        />
      )}
      
      {signedPdf && (
        <div>
          <h3>Signed Document:</h3>
          <iframe src={signedPdf} width="100%" height="500px" />
        </div>
      )}
    </div>
  );
};

export default SignatureApp;

Components

PDFSignatureSelector

Component for selecting positions where signatures should be placed on a PDF document.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | pdfFile | File or Blob | Yes | PDF file to display and select positions on | | pdfUrl | Pdf Url | Yes | PDF url to display and select positions on | | onSave | Function | Yes | Callback function that receives the selected signature positions and pdf file |

SignPdf

Component for creating a signature and applying it to a PDF document.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | pdfFile | File or Blob | Yes | PDF file to sign | | pdfUrl | Pdf Url | Yes | PDF url to sign | | signaturePositions | Array | Yes | Array of positions where signatures should be placed | | onSigningComplete | Function | Yes | Callback function that receives the signed PDF |

Development

Prerequisites

• Node.js >= 14
• npm or yarn

2. Install dependencies

npm install
# or
yarn