react-pdf-highlighter-plus

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 |
| Light/Dark Theme | Eye-friendly dark mode with customizable intensity |
| 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

``bash
npm install react-pdf-highlighter-plus
`

$3

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

---

Quick Start

$3

`tsx
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 (

{(pdfDocument) => (
pdfDocument={pdfDocument}
highlights={highlights}
enableAreaSelection={(e) => e.altKey}
>


)}

);
}

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

return highlight.type === "text" ? (

) : (

);
}
`

---

Highlight Types

$3

Select text in the PDF to create highlights.

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

$3

Hold Alt and drag to create rectangular highlights.

`tsx
enableAreaSelection={(event) => event.altKey}
// ...
>
`

$3

Create draggable, editable text annotations with customizable styling.

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

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

// In your highlight container:
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 →

$3

Upload images or draw signatures and place them on PDFs.

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

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

// In your highlight container:
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 →

$3

Draw freehand annotations directly on PDFs.

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

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

// In your highlight container:
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 →

---

Light/Dark Theme

Toggle between light and dark modes with customizable styling for comfortable reading.

`tsx
// Enable dark mode
pdfDocument={pdfDocument}
theme={{ mode: "dark" }}
highlights={highlights}
>



// Customize dark mode intensity and colors
pdfDocument={pdfDocument}
theme={{
mode: "dark",
darkModeInvertIntensity: 0.85, // Softer (0.8-1.0)
containerBackgroundColor: "#3a3a3a",
scrollbarThumbColor: "#6b6b6b",
scrollbarTrackColor: "#2c2c2c",
}}
highlights={highlights}
>


`

Features:
- Eye-friendly dark mode using CSS filter inversion
- Customizable inversion intensity (0.8-1.0)
- Preserve original highlight colors in dark mode
- Custom scrollbar styling
- Full theming control for container background

Inversion Intensity Guide:
| Value | Result | Use Case |
|-------|--------|----------|
| 1.0 | Pure black | High contrast |
| 0.9 | Dark gray (~#1a1a1a) | Recommended |
| 0.85 | Softer gray (~#262626) | Long reading sessions |
| 0.8 | Medium gray (~#333333) | Maximum comfort |

Full Documentation →

---

PDF Export

Export your annotated PDF with all highlights embedded.

`tsx
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 │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
`

$3

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

`tsx
// Converting between systems
const { viewportToScaled } = useHighlightContainerContext();

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

// Highlights are automatically converted to viewport when rendering
`

---

Customization

$3

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

// Use the generic type
const { highlight } = useHighlightContainerContext();
`

$3

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

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

$3

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

highlightTip={{
position: highlight.position,
content: ,
}}
>


`

---

Running Locally

`bash
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.