React PDF.js Viewer

A comprehensive React TypeScript component library for viewing and interacting with PDF files using Mozilla PDF.js. Features complete PDF.js web viewer functionality with modern React patterns, full TypeScript support, and enhanced user experience.

✨ Features

🔥 Complete PDF.js Web Viewer Functionality

• 📄 PDF Rendering: High-quality PDF rendering with Mozilla PDF.js
• 🖍️ Text Highlighting: Search and highlight text across all pages
• 🔍 Text Selection: Smooth text selection that works perfectly at any zoom level
• 🔎 Search: Find text with result navigation and highlighting
• 🗂️ Sidebar: Thumbnails, outline, attachments, and layers
• 👁️ View Modes: Single page, continuous, two-page, and book views
• 🔍 Zoom Controls: Fit to page, fit to width, actual size, custom zoom
• 🛠️ Tools: Hand/pan, text selection, annotation tools
• ⌨️ Keyboard Shortcuts: All official PDF.js keyboard shortcuts
• 🎦 Presentation Mode: Full-screen document viewing
• 🖨️ Print & Download: Complete document export functionality
• 📱 Responsive Design: Mobile-friendly and responsive layout
• 🎨 Customizable: Extensive theming and styling options

🚀 Enhanced React Integration

• ⚡ TypeScript First: Full type safety and IntelliSense support
• 🎣 React Hooks: Modern React patterns with hooks and context
• 🔄 State Management: Comprehensive state management for all viewer features
• 🛡️ Error Handling: Robust error boundaries and fallback mechanisms
• 🏗️ Component Architecture: Modular, reusable component design
• 📦 Tree Shakeable: Import only the components you need

🚀 Installation

npm install @nyazkhan/react-pdf-viewer pdfjs-dist

yarn add @nyazkhan/react-pdf-viewer pdfjs-dist

pnpm add @nyazkhan/react-pdf-viewer pdfjs-dist

📖 Quick Start

Basic Usage

import React from 'react'
import { PDFViewer } from '@nyazkhan/react-pdf-viewer'
import '@nyazkhan/react-pdf-viewer/styles/viewer.css'

function App() {
  return (
    <div style={{ height: '100vh' }}>
      <PDFViewer
        file="/path/to/your/document.pdf"
        width="100%"
        height="100%"
      />
    </div>
  )
}

export default App

Advanced Usage with All Features

import React, { useState } from 'react'
import {
  PDFViewer,
  type PDFDocumentProxy,
  type PDFHighlightType,
  type ViewMode,
  type SidebarView
} from '@nyazkhan/react-pdf-viewer'
import '@nyazkhan/react-pdf-viewer/styles/viewer.css'

function AdvancedPDFViewer() {
  const [highlights, setHighlights] = useState<PDFHighlightType[]>([])
  const [viewMode, setViewMode] = useState<ViewMode>('single')
  const [sidebarView, setSidebarView] = useState<SidebarView>('thumbnails')

  const handleDocumentLoad = (pdf: PDFDocumentProxy) => {
    console.log(`Loaded PDF with ${pdf.numPages} pages`)
  }

  const handleSearch = (term: string) => {
    console.log(`Searching for: ${term}`)
  }

  return (
    <PDFViewer
      file="/sample.pdf"
      highlights={highlights}
      viewMode={viewMode}
      sidebarView={sidebarView}
      enableTextSelection={true}
      enableKeyboardShortcuts={true}
      onDocumentLoad={handleDocumentLoad}
      onViewModeChange={setViewMode}
      onSidebarViewChange={setSidebarView}
      onSearch={handleSearch}
      width="100%"
      height="100vh"
      showPageControls={true}
      showZoomControls={true}
      showSearchOption={true}
      showPrintOption={true}
      showDownloadOption={true}
    />
  )
}

Text Highlighting

import React, { useState, useCallback } from 'react'
import { PDFViewer, type PDFHighlightType, type PDFDocumentProxy } from '@nyazkhan/react-pdf-viewer'

function PDFWithHighlighting() {
  const [highlights, setHighlights] = useState<PDFHighlightType[]>([])
  const [pdfDocument, setPdfDocument] = useState<PDFDocumentProxy | null>(null)

  const createHighlight = useCallback(async (searchText: string) => {
    if (!pdfDocument) return

    const newHighlights: PDFHighlightType[] = []
    
    for (let pageNum = 1; pageNum <= pdfDocument.numPages; pageNum++) {
      const page = await pdfDocument.getPage(pageNum)
      const textContent = await page.getTextContent()
      
      // Your highlighting logic here
      // ... (implementation details)
    }
    
    setHighlights(newHighlights)
  }, [pdfDocument])

  return (
    <div>
      <input
        type="text"
        placeholder="Enter text to highlight"
        onKeyPress={(e) => {
          if (e.key === 'Enter') {
            createHighlight(e.currentTarget.value)
          }
        }}
      />
      <PDFViewer
        file="/document.pdf"
        highlights={highlights}
        onDocumentLoad={setPdfDocument}
        width="100%"
        height="600px"
      />
    </div>
  )
}

🎛️ API Reference

PDFViewer Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | file | string \| File \| ArrayBuffer \| Uint8Array | - | Required. PDF file to display | | width | string \| number | "100%" | Viewer width | | height | string \| number | "600px" | Viewer height | | page | number | 1 | Initial page number | | scale | number | 1.0 | Initial zoom scale | | rotation | number | 0 | Initial rotation (0, 90, 180, 270) | | viewMode | ViewMode | "single" | Page view mode | | sidebarView | SidebarView | "none" | Sidebar view type | | highlights | PDFHighlightType[] | [] | Text highlights to display | | enableTextSelection | boolean | true | Enable text selection | | enableKeyboardShortcuts | boolean | true | Enable keyboard shortcuts | | renderToolbar | boolean | true | Show toolbar | | renderSidebar | boolean | true | Show sidebar |

Event Handlers

| Prop | Type | Description | |------|------|-------------| | onDocumentLoad | (pdf: PDFDocumentProxy) => void | Called when PDF loads | | onPageChange | (page: number) => void | Called when page changes | | onScaleChange | (scale: number) => void | Called when zoom changes | | onViewModeChange | (mode: ViewMode) => void | Called when view mode changes | | onSearch | (term: string) => void | Called when searching | | onError | (error: Error) => void | Called on errors |

Types

type ViewMode = 'single' | 'continuous' | 'two-page' | 'book'
type SidebarView = 'none' | 'thumbnails' | 'outline' | 'attachments' | 'layers'
type ToolbarTool = 'none' | 'hand' | 'selection' | 'annotation'

interface PDFHighlightType {
  id: string
  pageNumber: number
  rects: PDFRect[]
  color?: string
  opacity?: number
  content?: string
}

interface PDFRect {
  left: number
  top: number
  width: number
  height: number
}

⌨️ Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | n, j, Space | Next page | | p, k, Shift+Space | Previous page | | Ctrl/Cmd + + | Zoom in | | Ctrl/Cmd + - | Zoom out | | Ctrl/Cmd + 0 | Actual size | | Ctrl/Cmd + F | Find/Search | | Ctrl/Cmd + G | Find next | | Ctrl/Cmd + O | Open file | | Ctrl/Cmd + S | Save/Download | | Ctrl/Cmd + P | Print | | F4 | Toggle sidebar | | Home | First page | | End | Last page | | r | Rotate clockwise | | Shift + r | Rotate counter-clockwise |

🎨 Styling

Import the default styles:

@import '@nyazkhan/react-pdf-viewer/styles/viewer.css';

Or customize with CSS variables:

.pdf-viewer {
  --pdf-toolbar-bg: #2c3e50;
  --pdf-toolbar-color: white;
  --pdf-sidebar-bg: #34495e;
  --pdf-page-border: #ddd;
  --pdf-highlight-color: #ffff00;
  --pdf-selection-color: #3498db;
}

📱 Browser Support

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+
• ✅ Mobile browsers (iOS Safari 14+, Chrome Mobile 90+)

🔧 Requirements

• React: 16.8.0 or higher
• pdfjs-dist: 3.0.0 or higher
• Modern browser with ES2017 support

📝 License

MIT © Nyaz Khan

🤝 Contributing

Contributions are welcome! Please see our Contributing Guide for details.

🐛 Issues

Found a bug? Please open an issue with a detailed description.

🌟 Star History

Made with ❤️ for the React community