@pdf-annotator/react-annotator

React components for PDF annotation with support for rectangle-based annotations and product identification.

Installation

npm install @pdf-annotator/react-annotator @tanstack/react-query react-pdf pdfjs-dist

Quick Start

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AnnotatorProvider, PdfAnnotator } from '@pdf-annotator/react-annotator';
import '@pdf-annotator/react-annotator/styles.css';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AnnotatorProvider apiUrl="http://localhost:3000/api/pdf-annotator">
        <PdfAnnotator
          pdfUrl="/path/to/document.pdf"
          pdfId="pdf-123"
          onAnnotationClick={(annotation) => {
            console.log('Clicked annotation:', annotation);
          }}
        />
      </AnnotatorProvider>
    </QueryClientProvider>
  );
}

Components

<AnnotatorProvider>

Context provider that configures the annotation system.

Props:

• apiUrl (string, required): Base URL for the annotation API
• config (AnnotatorConfig, optional): Configuration options

<PdfAnnotator>

Main PDF viewer component with annotation overlays.

Props:

• pdfUrl (string, required): URL to the PDF document
• pdfId (string, required): Unique ID for the PDF
• onAnnotationClick (function, optional): Callback when annotation is clicked
• className (string, optional): Additional CSS classes

Hooks

useAnnotations(pdfId, pageNumber?)

Fetch annotations for a PDF or specific page.

useCreateAnnotation()

Create a new annotation.

useUpdateAnnotation()

Update an existing annotation.

useDeleteAnnotation()

Delete an annotation.

License

MIT