# react-pdf — Display PDFs in React as Easily as Images

> A React component library that renders PDF documents in the browser using Mozilla's pdf.js under the hood. Supports page navigation, text selection, annotations, and responsive scaling out of the box.

## Install

Save in your project root:

# react-pdf — Display PDFs in React as Easily as Images

## Quick Use
```bash
npm install react-pdf
```
```jsx
import { Document, Page } from 'react-pdf';

function MyPDF() {
  return (
    <Document file="/sample.pdf">
      <Page pageNumber={1} />
    </Document>
  );
}
```

## Introduction
react-pdf brings PDF rendering to React applications without requiring iframes or external viewers. Built on top of Mozilla's pdf.js, it gives developers a declarative component API for displaying PDF files while retaining features like text selection and link handling.

## What react-pdf Does
- Renders PDF pages as canvas or SVG elements inside React components
- Supports loading PDFs from URLs, file objects, base64 strings, or ArrayBuffers
- Provides page-level controls for zoom, rotation, and custom rendering
- Enables text layer overlay for copy-paste and accessibility
- Handles annotation layers for clickable links and form fields within PDFs

## Architecture Overview
react-pdf wraps Mozilla's pdf.js library in a set of React components. The Document component manages loading and parsing the PDF binary, while Page components render individual pages. A web worker processes PDF parsing off the main thread to keep the UI responsive. The library supports both canvas-based and SVG-based rendering pipelines.

## Self-Hosting & Configuration
- Install via npm or yarn and import the Document and Page components
- Configure the pdf.js worker by setting pdfjs.GlobalWorkerOptions.workerSrc or using the bundled worker
- Use the onLoadSuccess callback to get page count and metadata
- Customize rendering with width, scale, or renderTextLayer props
- For server-side rendering, conditionally import to avoid window references

## Key Features
- Declarative React API that feels native alongside other JSX components
- Off-main-thread PDF parsing via web workers for smooth scrolling
- Built-in text layer for accessibility and text selection
- Annotation layer support for interactive PDF forms and links
- Compatible with Next.js, Vite, Webpack, and other modern bundlers

## Comparison with Similar Tools
- **pdf.js** — the underlying engine; react-pdf provides the React component wrapper
- **@react-pdf/renderer** — generates PDFs from React markup; react-pdf displays existing PDFs
- **iframe embedding** — simple but lacks control over styling, navigation, and text selection
- **react-pdf-viewer** — similar goal with a different API surface and plugin architecture

## FAQ
**Q: Can I render all pages of a multi-page PDF at once?**
A: Yes. Map over page numbers from onLoadSuccess and render multiple Page components.

**Q: Does it work with Next.js App Router?**
A: Yes. Mark the component with "use client" and configure the worker path for the bundler.

**Q: How large are the dependencies?**
A: The pdf.js core adds roughly 400 KB gzipped. The worker runs in a separate thread and does not block rendering.

**Q: Can I add custom overlays on top of PDF pages?**
A: Yes. Each Page component accepts a customTextRenderer prop and supports child elements for overlay content.

## Sources
- https://github.com/wojtekmaj/react-pdf
- https://projects.wojtekmaj.pl/react-pdf/

---
Source: https://tokrepo.com/en/workflows/asset-0120c66f
Author: AI Open Source