Package Exports

pdf-annotator-react
pdf-annotator-react/dist/index.esm.js
pdf-annotator-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pdf-annotator-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PDF Annotator React

A modern React component library for PDF annotation. This library allows you to easily add annotation capabilities to PDFs in your React applications.

Features

View PDFs with page navigation
Create and manage annotations:
- Highlights
- Underlines
- Strikeouts
- Rectangles
- Freehand drawing
- Text notes
- Comments
Customize annotation colors
Get callbacks for annotation events (create, update, delete, select)
Modern React hooks-based API

Installation

npm install pdf-annotator-react
# or 
yarn add pdf-annotator-react

Usage

Basic Example

import React, { useState } from 'react';
import { PdfAnnotator, AnnotationMode } from 'pdf-annotator-react';

const MyPdfAnnotator = () => {
  const [annotations, setAnnotations] = useState([]);
  
  const handleAnnotationCreate = (newAnnotation) => {
    setAnnotations(prev => [...prev, newAnnotation]);
  };
  
  const handleAnnotationUpdate = (updatedAnnotation) => {
    setAnnotations(prev => 
      prev.map(a => a.id === updatedAnnotation.id ? updatedAnnotation : a)
    );
  };
  
  const handleAnnotationDelete = (annotationId) => {
    setAnnotations(prev => prev.filter(a => a.id !== annotationId));
  };
  
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <PdfAnnotator
        url="https://example.com/sample.pdf"
        annotations={annotations}
        onAnnotationCreate={handleAnnotationCreate}
        onAnnotationUpdate={handleAnnotationUpdate}
        onAnnotationDelete={handleAnnotationDelete}
        annotationMode={AnnotationMode.HIGHLIGHT}
      />
    </div>
  );
};

export default MyPdfAnnotator;

Advanced Example with Custom Colors

import React, { useState } from 'react';
import { PdfAnnotator, AnnotationMode } from 'pdf-annotator-react';

const MyPdfAnnotator = () => {
  const [annotations, setAnnotations] = useState([]);
  const [mode, setMode] = useState(AnnotationMode.NONE);
  
  // Annotation event handlers
  const handleAnnotationCreate = (newAnnotation) => {
    setAnnotations(prev => [...prev, newAnnotation]);
  };
  
  const handleAnnotationUpdate = (updatedAnnotation) => {
    setAnnotations(prev => 
      prev.map(a => a.id === updatedAnnotation.id ? updatedAnnotation : a)
    );
  };
  
  const handleAnnotationDelete = (annotationId) => {
    setAnnotations(prev => prev.filter(a => a.id !== annotationId));
  };
  
  const handleAnnotationSelect = (selectedAnnotation) => {
    console.log('Selected annotation:', selectedAnnotation);
  };
  
  // Tools toolbar
  const renderToolbar = () => (
    <div style={{ marginBottom: '10px' }}>
      <button onClick={() => setMode(AnnotationMode.NONE)}>Select</button>
      <button onClick={() => setMode(AnnotationMode.HIGHLIGHT)}>Highlight</button>
      <button onClick={() => setMode(AnnotationMode.UNDERLINE)}>Underline</button>
      <button onClick={() => setMode(AnnotationMode.RECTANGLE)}>Rectangle</button>
      <button onClick={() => setMode(AnnotationMode.DRAWING)}>Draw</button>
      <button onClick={() => setMode(AnnotationMode.COMMENT)}>Comment</button>
    </div>
  );
  
  return (
    <div>
      {renderToolbar()}
      <div style={{ height: 'calc(100vh - 40px)', width: '100%' }}>
        <PdfAnnotator
          url="https://example.com/sample.pdf"
          annotations={annotations}
          onAnnotationCreate={handleAnnotationCreate}
          onAnnotationUpdate={handleAnnotationUpdate}
          onAnnotationDelete={handleAnnotationDelete}
          onAnnotationSelect={handleAnnotationSelect}
          annotationMode={mode}
          onAnnotationModeChange={setMode}
          // Custom colors
          highlightColor="rgba(255, 230, 0, 0.4)"
          underlineColor="rgba(0, 100, 255, 0.7)"
          rectangleColor="rgba(255, 0, 0, 0.3)"
          drawingColor="#22cc22"
        />
      </div>
    </div>
  );
};

export default MyPdfAnnotator;

Example with Pin Annotations

import React, { useRef, useState } from 'react';
import { PdfAnnotator, AnnotationMode, AnnotationType, PdfAnnotatorRef } from 'pdf-annotator-react';

const PdfWithPins = () => {
  const [annotations, setAnnotations] = useState([]);
  const [mode, setMode] = useState(AnnotationMode.NONE);
  const annotatorRef = useRef<PdfAnnotatorRef>(null);
  
  // Define available tags for pin annotations
  const availableTags = [
    { _id: '1', tag: 'Issue', tipo: 'problem' },
    { _id: '2', tag: 'Question', tipo: 'query' },
    { _id: '3', tag: 'Todo', tipo: 'action' },
    { _id: '4', tag: 'Important', tipo: 'priority' }
  ];
  
  // Define default tags that will be pre-selected on new pins
  const defaultTags = [availableTags[3]]; // Pre-select "Important" tag
  
  // Annotation event handlers
  const handleAnnotationCreate = (newAnnotation) => {
    console.log('New annotation created:', newAnnotation);
    setAnnotations(prev => [...prev, newAnnotation]);
  };
  
  const handleAnnotationUpdate = (updatedAnnotation) => {
    setAnnotations(prev => 
      prev.map(a => a.id === updatedAnnotation.id ? updatedAnnotation : a)
    );
  };
  
  const handleAnnotationDelete = (annotationId) => {
    setAnnotations(prev => prev.filter(a => a.id !== annotationId));
  };
  
  // Programmatically add a pin at a fixed location
  const addProgrammaticPin = () => {
    if (annotatorRef.current) {
      // You can use createPin or addPinAtPosition
      const pin = annotatorRef.current.addPinAtPosition(
        300, // x
        400, // y
        1,   // page index
        [availableTags[0]], // Add with "Issue" tag
        "This pin was created programmatically" // Comment
      );
      
      console.log('Programmatically created pin:', pin);
    }
  };
  
  // Open the pin popup at a specific location
  const openPinPopupAtPosition = () => {
    if (annotatorRef.current) {
      annotatorRef.current.openPinPopupAt(
        400, // x
        500, // y
        1    // page index
      );
    }
  };
  
  // Get all pins from the document
  const getAllPins = () => {
    if (annotatorRef.current) {
      const pins = annotatorRef.current.getPins();
      console.log(`Document has ${pins.length} pins:`, pins);
      alert(`This document has ${pins.length} pins`);
    }
  };
  
  return (
    <div>
      <div className="toolbar" style={{ marginBottom: '10px', display: 'flex', gap: '8px' }}>
        <button onClick={() => setMode(AnnotationMode.NONE)}>Select</button>
        <button onClick={() => setMode(AnnotationMode.PIN)}>Add Pin</button>
        <button onClick={addProgrammaticPin}>Add Pin Programmatically</button>
        <button onClick={openPinPopupAtPosition}>Open Pin Popup</button>
        <button onClick={getAllPins}>Get All Pins</button>
      </div>
      
      <div style={{ height: 'calc(100vh - 50px)', width: '100%' }}>
        <PdfAnnotator
          ref={annotatorRef}
          url="https://example.com/sample.pdf"
          annotations={annotations}
          onAnnotationCreate={handleAnnotationCreate}
          onAnnotationUpdate={handleAnnotationUpdate}
          onAnnotationDelete={handleAnnotationDelete}
          annotationMode={mode}
          onAnnotationModeChange={setMode}
          availableTags={availableTags}
          defaultTags={defaultTags}
          enabledTools={[AnnotationType.HIGHLIGHT, AnnotationType.PIN]} // Only enable highlight and pin tools
          pinColor="rgba(255, 0, 0, 0.7)" // Custom red pin color
        />
      </div>
    </div>
  );
};

export default PdfWithPins;

Props

The PdfAnnotator component accepts the following props:

Prop	Type	Description
`url`	string	URL of the PDF to display
`annotations`	Array	Array of annotation objects
`scale`	number	Scale factor for rendering (default: 1.0)
`pageNumber`	number	Initial page number to display (default: 1)
`onDocumentLoadSuccess`	function	Callback when PDF loads successfully
`onPageChange`	function	Callback when page changes
`annotationMode`	AnnotationMode	Current annotation mode
`onAnnotationModeChange`	function	Callback when annotation mode changes
`onAnnotationCreate`	function	Callback when an annotation is created
`onAnnotationUpdate`	function	Callback when an annotation is updated
`onAnnotationDelete`	function	Callback when an annotation is deleted
`onAnnotationSelect`	function	Callback when an annotation is selected
`highlightColor`	string	Custom color for highlight annotations
`underlineColor`	string	Custom color for underline annotations
`strikeoutColor`	string	Custom color for strikeout annotations
`rectangleColor`	string	Custom color for rectangle annotations
`drawingColor`	string	Custom color for drawing annotations
`textColor`	string	Custom color for text annotations
`commentColor`	string	Custom color for comment annotations
`pinColor`	string	Custom color for pin annotations (default: 'rgba(249, 115, 22, 0.7)')
`categoryColors`	object	Map of category IDs to colors
`availableTags`	Array	Array of tags that can be added to pin annotations
`defaultTags`	Array	Default tags to pre-select for new pin annotations
`enabledTools`	Array	Array of AnnotationType values to enable (default: all types)
`pdfWorkerSrc`	string	URL to PDF.js worker script

PdfAnnotatorRef Methods

When using a ref with the PdfAnnotator component, you can access the following methods:

Method	Description
`getAnnotationsJSON()`	Returns a JSON string of all annotations
`getAnnotations()`	Returns the array of all annotation objects
`getPins()`	Returns only the pin annotations
`createPin(point, pageIndex, tags, content)`	Creates a pin at the specified point
`addPinAtPosition(x, y, pageIndex, tags, content)`	Adds a pin at the specified coordinates
`openPinPopupAt(x, y, pageIndex)`	Opens the pin popup at the specified coordinates

License

MIT