react-pdf-highlighter-plus

react-pdf-highlighter-plus

react-pdf-highlighter-plus

GitHub stars Node.js CI npm version npm downloads

A powerful React library for annotating PDF documents

Text highlights • Area highlights • Freetext notes • Images & signatures • Freehand drawing • PDF export

Overview

react-pdf-highlighter-plus provides a highly customizable annotation experience for PDF documents in React applications. Built on PDF.js, it stores highlight positions in viewport-independent coordinates, making them portable across different screen sizes.

Features

Feature Description
Text Highlights Select and highlight text passages
Area Highlights Draw rectangular regions on PDFs
Freetext Notes Draggable, editable sticky notes with custom styling
Images & Signatures Upload images or draw signatures directly on PDFs
Freehand Drawing Draw freehand annotations with customizable stroke
PDF Export Export annotated PDF with all highlights embedded
Zoom Support Full zoom functionality with position-independent data
Fully Customizable Exposed styling on all components

Quick Links

Resource Link
Live Demo View Demo
Documentation API Docs
NPM Package npm

Installation

npm install react-pdf-highlighter-plus

Import Styles

import "react-pdf-highlighter-plus/style/style.css";

Quick Start

Basic Setup

import {
  PdfLoader,
  PdfHighlighter,
  TextHighlight,
  AreaHighlight,
  useHighlightContainerContext,
} from "react-pdf-highlighter-plus";
import "react-pdf-highlighter-plus/style/style.css";

function App() {
  const [highlights, setHighlights] = useState([]);

  return (
    <PdfLoader document="https://example.com/document.pdf">
      {(pdfDocument) => (
        <PdfHighlighter
          pdfDocument={pdfDocument}
          highlights={highlights}
          enableAreaSelection={(e) => e.altKey}
        >
          <HighlightContainer />
        </PdfHighlighter>
      )}
    </PdfLoader>
  );
}

function HighlightContainer() {
  const { highlight, isScrolledTo } = useHighlightContainerContext();

  return highlight.type === "text" ? (
    <TextHighlight highlight={highlight} isScrolledTo={isScrolledTo} />
  ) : (
    <AreaHighlight highlight={highlight} isScrolledTo={isScrolledTo} />
  );
}

Highlight Types

1. Text Highlights

Select text in the PDF to create highlights.

<TextHighlight
  highlight={highlight}
  isScrolledTo={isScrolledTo}
  style={{ background: "rgba(255, 226, 143, 1)" }}
/>

2. Area Highlights

Hold Alt and drag to create rectangular highlights.

<PdfHighlighter
  enableAreaSelection={(event) => event.altKey}
  // ...
>

3. Freetext Notes

Create draggable, editable text annotations with customizable styling.

import { FreetextHighlight } from "react-pdf-highlighter-plus";

<PdfHighlighter
  enableFreetextCreation={() => freetextMode}
  onFreetextClick={(position) => {
    addHighlight({ type: "freetext", position, content: { text: "Note" } });
  }}
>

// In your highlight container:
<FreetextHighlight
  highlight={highlight}
  onChange={handlePositionChange}
  onTextChange={handleTextChange}
  onStyleChange={handleStyleChange}
  color="#333333"
  backgroundColor="#ffffc8"
  fontSize="14px"
/>

Features:

  • Drag to reposition
  • Click to edit text
  • Built-in style panel (colors, font size, font family)
  • Toolbar appears on hover

Full Documentation →

4. Images & Signatures

Upload images or draw signatures and place them on PDFs.

import { ImageHighlight, SignaturePad } from "react-pdf-highlighter-plus";

// Signature pad modal
<SignaturePad
  isOpen={isOpen}
  onComplete={(dataUrl) => setPendingImage(dataUrl)}
  onClose={() => setIsOpen(false)}
/>

// In your highlight container:
<ImageHighlight
  highlight={highlight}
  onChange={handlePositionChange}
  onEditStart={() => toggleEditInProgress(true)}
  onEditEnd={() => toggleEditInProgress(false)}
/>

Features:

  • Upload any image format
  • Draw signatures with mouse or touch
  • Drag to reposition
  • Resize while maintaining aspect ratio
  • Toolbar appears on hover

Full Documentation →

5. Freehand Drawing

Draw freehand annotations directly on PDFs.

import { DrawingHighlight } from "react-pdf-highlighter-plus";

<PdfHighlighter
  enableDrawingCreation={() => drawingMode}
  onDrawingComplete={(position, dataUrl) => {
    addHighlight({ type: "drawing", position, content: { image: dataUrl } });
  }}
  drawingConfig={{
    strokeColor: "#ff0000",
    strokeWidth: 2,
  }}
>

// In your highlight container:
<DrawingHighlight
  highlight={highlight}
  onChange={handlePositionChange}
/>

Features:

  • Freehand drawing with mouse or touch
  • Customizable stroke color and width
  • Stored as PNG for PDF export compatibility
  • Drag to reposition

Full Documentation →

PDF Export

Export your annotated PDF with all highlights embedded.

import { exportPdf } from "react-pdf-highlighter-plus";

const handleExport = async () => {
  const pdfBytes = await exportPdf(pdfUrl, highlights, {
    textHighlightColor: "rgba(255, 226, 143, 0.5)",
    areaHighlightColor: "rgba(255, 226, 143, 0.5)",
    onProgress: (current, total) => console.log(`${current}/${total} pages`),
  });

  // Download the file
  const blob = new Blob([pdfBytes], { type: "application/pdf" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "annotated.pdf";
  a.click();
  URL.revokeObjectURL(url);
};

Supported highlight types:

  • Text highlights (colored rectangles)
  • Area highlights (colored rectangles)
  • Freetext notes (background + wrapped text)
  • Images & signatures (embedded PNG/JPG)
  • Freehand drawings (embedded PNG)

Full Documentation →

Component Architecture

┌─────────────────────────────────────────────────────┐
│                    PdfLoader                         │
│  Loads PDF document via PDF.js                       │
│                                                      │
│  ┌───────────────────────────────────────────────┐  │
│  │               PdfHighlighter                   │  │
│  │  Manages viewer, events, coordinate systems   │  │
│  │                                               │  │
│  │  ┌─────────────────────────────────────────┐  │  │
│  │  │      User-defined HighlightContainer    │  │  │
│  │  │  Renders highlights using context hooks │  │  │
│  │  │                                         │  │  │
│  │  │  • TextHighlight                        │  │  │
│  │  │  • AreaHighlight                        │  │  │
│  │  │  • FreetextHighlight                    │  │  │
│  │  │  • ImageHighlight                       │  │  │
│  │  │  • DrawingHighlight                     │  │  │
│  │  └─────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────┘

Context Hooks

Hook Purpose
usePdfHighlighterContext() Viewer utilities: scrollToHighlight, setTip, getCurrentSelection
useHighlightContainerContext() Per-highlight utilities: highlight, viewportToScaled, screenshot

Coordinate Systems

The library uses two coordinate systems:

System Description Use Case
Viewport Pixel coordinates relative to current zoom Rendering on screen
Scaled Normalized (0-1) coordinates relative to page Storage & retrieval 
// Converting between systems
const { viewportToScaled } = useHighlightContainerContext();

// Save position (viewport → scaled)
const scaledPosition = viewportToScaled(boundingRect);

// Highlights are automatically converted to viewport when rendering

Customization

Custom Highlight Interface

interface MyHighlight extends Highlight {
  category: string;
  comment?: string;
  author?: string;
}

// Use the generic type
const { highlight } = useHighlightContainerContext<MyHighlight>();

Custom Styling

// Via props
<TextHighlight
  highlight={highlight}
  style={{ background: categoryColors[highlight.category] }}
/>

// Via CSS classes
.TextHighlight { }
.AreaHighlight { }
.FreetextHighlight { }
.ImageHighlight { }
.DrawingHighlight { }

Tips and Popups

import { MonitoredHighlightContainer } from "react-pdf-highlighter-plus";

<MonitoredHighlightContainer
  highlightTip={{
    position: highlight.position,
    content: <MyPopup highlight={highlight} />,
  }}
>
  <TextHighlight highlight={highlight} />
</MonitoredHighlightContainer>

Running Locally

git clone https://github.com/QuocVietHa08/react-pdf-highlighter-plus.git
cd react-pdf-highlighter-plus
npm install
npm run dev

API Reference

See the full API Reference for detailed documentation on all components and types.

Contributing

Contributions are welcome! Please:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

For bugs, please open an issue with clear reproduction steps.

License

MIT

Credits

Originally forked from react-pdf-highlighter with significant architectural changes including context-based APIs, zoom support, freetext/image/drawing highlights, and PDF export functionality.

On This Page

react-pdf-highlighter-plus