PDF.js Viewer React

A lightweight, customizable PDF viewer component for React applications. Built on top of Mozilla's PDF.js, this library makes it easy to integrate PDF viewing capabilities into your React projects.

✨ Features

• 📄 Render PDFs directly in your React application
• 🔍 Customizable zoom/scale options
• 📱 Responsive design
• 🎨 Customizable navigation controls
• 🚀 Compatible with React 18+ and Vite projects
• 📦 Lightweight with minimal dependencies

🔥 Live Demo

Check out our live demo to see the component in action!

📦 Installation

npm install pdfjs-react-viewer
# or
yarn add pdfjs-react-viewer

🔧 Compatibility

This library has been tested and works well with:

• ✅ React 18+
• ✅ Vite 4.x and 6.x projects
• ✅ Next.js 13+
• ✅ Create React App
• ✅ TypeScript projects

🤔 Why Use This Library?

• Simplified Integration: No need to deal with the complexities of PDF.js directly
• React-First Design: Built specifically for React applications
• Lightweight: Minimal impact on your bundle size
• TypeScript Support: Full TypeScript definitions included
• Customizable: Easily style and extend to match your application's design
• Actively Maintained: Regular updates and improvements

💻 Basic Usage

import { PDFJSViewer } from 'pdfjs-react-viewer';

function App() {
  return (
    <div className="app">
      <PDFJSViewer 
        pdfUrl="https://example.com/sample.pdf" 
        scale={1.5}
      />
    </div>
  );
}

With Custom Scale Control

import { useState } from 'react';
import { PDFJSViewer } from 'pdfjs-react-viewer';

function App() {
  const [scale, setScale] = useState(1.5);
  
  return (
    <div className="app">
      <div className="scale-controls">
        <button onClick={() => setScale(prev => Math.max(0.5, prev - 0.25))}>Zoom Out</button>
        <span>{Math.round(scale * 100)}%</span>
        <button onClick={() => setScale(prev => prev + 0.25)}>Zoom In</button>
      </div>
      
      <PDFJSViewer 
        pdfUrl="https://example.com/sample.pdf" 
        scale={scale}
      />
    </div>
  );
}

🚀 Getting Started with Vite

Quickly set up a new Vite project with PDF.js Viewer React:

# Create a new Vite project
npm create vite@latest my-pdf-app --template react-ts
cd my-pdf-app

# Install dependencies
npm install
npm install pdfjs-react-viewer

# Start the development server
npm run dev

Then edit your src/App.tsx to include the PDF viewer:

import { PDFJSViewer } from 'pdfjs-react-viewer';
import './App.css';

function App() {
  return (
    <div className="container">
      <h1>PDF Viewer Example</h1>
      <div className="pdf-container">
        <PDFJSViewer 
          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
          scale={1.5}
        />
      </div>
    </div>
  );
}

export default App;

📚 API Reference

PDFJSViewer

The main component for rendering PDFs.

import { PDFJSViewer } from 'pdfjs-react-viewer';

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | pdfUrl | string | Required | URL of the PDF to display | | scale | number | 1.5 | Scale factor for rendering the PDF | | renderControls | function | Default controls | Custom renderer for navigation controls | | className | string | '' | CSS class name for the container | | workerSrc | string | Mozilla CDN | Worker source URL | | onPageChange | function | - | Callback fired when the page changes | | onDocumentLoad | function | - | Callback fired when the PDF document is loaded | | viewerRef | React.RefObject<PDFJSViewerAPI> | - | Ref to access the viewer API methods |

PDFControls

Navigation controls component that can be used separately or customized.

import { PDFControls } from 'pdfjs-react-viewer';

Props

| Prop | Type | Description | |------|------|-------------| | currentPage | number | Current page number | | totalPages | number | Total number of pages | | onPrevPage | function | Go to previous page | | onNextPage | function | Go to next page | | isPrevDisabled | boolean | Whether the previous button is disabled | | isNextDisabled | boolean | Whether the next button is disabled |

Creating Custom Controls

You can create custom navigation controls by providing a function to the renderControls prop of the PDFJSViewer component. The function receives the same props as the PDFControls component.

Example of Custom Controls

import { PDFJSViewer, PDFControlsProps } from 'pdfjs-react-viewer';

// Custom controls component
const CustomControls = (props: PDFControlsProps) => {
  const { currentPage, totalPages, onPrevPage, onNextPage, isPrevDisabled, isNextDisabled } = props;
  
  return (
    <div className="custom-controls">
      <button 
        onClick={onPrevPage} 
        disabled={isPrevDisabled}
        className="custom-button"
      >
        Previous
      </button>
      
      <span className="page-indicator">
        Page {currentPage} of {totalPages}
      </span>
      
      <button 
        onClick={onNextPage} 
        disabled={isNextDisabled}
        className="custom-button"
      >
        Next
      </button>
    </div>
  );
};

// Using the custom controls
function App() {
  return (
    <div className="app">
      <PDFJSViewer 
        pdfUrl="https://example.com/sample.pdf" 
        scale={1.5}
        renderControls={CustomControls}
      />
    </div>
  );
}

Using Callbacks and the Viewer API

Page Change Tracking

You can track page changes using the onPageChange callback:

import { PDFJSViewer } from 'pdfjs-react-viewer';

function App() {
  const handlePageChange = (pageNumber, totalPages) => {
    console.log(`Viewing page ${pageNumber} of ${totalPages}`);
    // Update UI or state based on page change
  };

  return (
    <div className="app">
      <PDFJSViewer 
        pdfUrl="https://example.com/sample.pdf" 
        onPageChange={handlePageChange}
      />
    </div>
  );
}

Document Load Events

You can respond to document loading using the onDocumentLoad callback:

import { PDFJSViewer } from 'pdfjs-react-viewer';

function App() {
  const handleDocumentLoad = (totalPages) => {
    console.log(`PDF loaded with ${totalPages} pages`);
    // Initialize UI or state based on document load
  };

  return (
    <div className="app">
      <PDFJSViewer 
        pdfUrl="https://example.com/sample.pdf" 
        onDocumentLoad={handleDocumentLoad}
      />
    </div>
  );
}

Programmatic Control with Viewer API

You can programmatically control the viewer using the viewerRef:

import { useRef } from 'react';
import { PDFJSViewer, PDFJSViewerAPI } from 'pdfjs-react-viewer';

function App() {
  // Create a ref to access the viewer API
  const pdfViewerRef = useRef<PDFJSViewerAPI>(null);

  // Function to jump to a specific page
  const goToPage5 = () => {
    if (pdfViewerRef.current) {
      pdfViewerRef.current.goToPage(5);
    }
  };

  // Function to get the current page
  const logCurrentPage = () => {
    if (pdfViewerRef.current) {
      const currentPage = pdfViewerRef.current.getCurrentPage();
      console.log(`Currently on page ${currentPage}`);
    }
  };

  return (
    <div className="app">
      <div className="controls">
        <button onClick={goToPage5}>Go to Page 5</button>
        <button onClick={logCurrentPage}>Log Current Page</button>
      </div>
      
      <PDFJSViewer 
        pdfUrl="https://example.com/sample.pdf" 
        viewerRef={pdfViewerRef}
      />
    </div>
  );
}

Types

The library exports TypeScript types for all components and PDF.js interfaces:

import type { 
  PDFJSViewerProps, 
  PDFControlsProps,
  PDFDocumentProxy,
  PDFPageProxy,
  PDFViewport,
  PDFRenderContext,
  PDFRenderTask,
  PDFJSLib,
  PDFJSViewerAPI // New API interface
} from 'pdfjs-react-viewer';

Development

Building the package

yarn build:package

Building the demo

yarn build:demo

Packing the package for installation

yarn pack

License

MIT