Package Exports

pdfjs-react-viewer

Readme

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