Sign-spotter NPM

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.