PDFSpotter

PDFSpotter is a React library for rendering, navigating, and interacting with PDF documents. It allows users to view PDF files, navigate through pages, and insert signatures at specified positions on the document.

Features

• Render PDF documents using pdfjs-dist.
• Navigate between pages with a customizable navigation bar.
• Insert signatures at specific positions on the PDF.
• Detect and display mouse interaction points on the PDF canvas.

Installation

To install the library, you need to install the required dependencies manually:

npm install sign-spotter
# or
yarn add sign-spotter

Then, copy the PDFSpotter component and its related files into your project.

Usage

Here’s an example of how to use the PDFSpotter component:

import React from "react";
import PDFSpotter from "./PDFSpotter";

const App = () => {
  const handleSign = (signatureCoordinates) => {
    console.log("Signature added at:", signatureCoordinates);
  };

  const signatureItems = [
    { x: 100, y: 200, page: 1, text: "Signature 1" },
    { x: 150, y: 300, page: 2, text: "Signature 2" },
  ];

  return (
    <PDFSpotter
      pdfUrl="https://example.com/sample.pdf"
      onSign={handleSign}
      signatureItems={signatureItems}
    />
  );
};

export default App;

Props

| Prop Name | Type | Description | |--------------------|------------------------------|-----------------------------------------------------------------------------| | pdfUrl | string | The URL or path of the PDF document to render. | | onSign | (coords: object) => void | Callback function triggered when a signature is added. | | signatureItems | Array<{ x, y, page, text }>| Array of predefined signature items to display on the PDF. |

How It Works

1. PDF Rendering
   The PDFSpotter uses pdfjs-dist to render PDF pages on a canvas element.

2. Page Navigation
   Users can navigate between pages using the PDFNavigationBar component.

3. Signature Placement

   • Mouse coordinates are captured using useMouse from @uidotdev/usehooks.
   • Signatures are placed relative to the mouse position, with coordinates transformed to match the PDF's coordinate system.

4. Signature Indicators
   Indicator components mark where signatures are located or can be added.

Dependencies

• pdfjs-dist: PDF rendering library.
• @uidotdev/usehooks: Hook for capturing mouse events.
• lodash: Utility library for various operations.

License

This project is licensed under the terms of the KSL License.