sign-spotter

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

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

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

• 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.

• 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.