React PDF Viewer

A fast, customizable React PDF viewer component powered by pdf.js. Works with Next.js, Vite, CRA, and any React environment.

Features

• Navigation (prev/next, page jump, keyboard shortcuts)
• Zoom (in/out, fit-width, fit-page)
• Search with match highlighting
• Download with custom filename
• Print
• Full screen
• Rotation
• Thumbnail sidebar
• Light/dark/system theme
• Compound components for full layout control
• CSS custom properties for easy theming

Installation

npm install @matangot/react-pdf-viewer react react-dom pdfjs-dist

Setup pdf.js worker

import { GlobalWorkerOptions } from 'pdfjs-dist';

GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url
).toString();

Quick Start

import { PdfViewer } from '@matangot/react-pdf-viewer';
import '@matangot/react-pdf-viewer/styles.css';

function App() {
  return (
    <PdfViewer
      src="https://example.com/document.pdf"
      defaultPage={1}
      defaultZoom="fit-width"
      theme="system"
    />
  );
}

Compound Components

For full control over layout and which actions to show:

import { PdfViewer } from '@matangot/react-pdf-viewer';
import '@matangot/react-pdf-viewer/styles.css';

function CustomViewer() {
  return (
    <PdfViewer.Root src={pdfUrl} theme="dark">
      <PdfViewer.Toolbar>
        <PdfViewer.Navigation />
        <PdfViewer.Separator />
        <PdfViewer.Zoom />
        <PdfViewer.Separator />
        <PdfViewer.Download fileName="report.pdf" />
        <PdfViewer.Print />
        <PdfViewer.FullScreen />
      </PdfViewer.Toolbar>
      <PdfViewer.Pages />
    </PdfViewer.Root>
  );
}

Programmatic Access

import { usePdfViewer } from '@matangot/react-pdf-viewer';

function CustomControls() {
  const { currentPage, totalPages, zoomIn, goToPage } = usePdfViewer();

  return (
    <div>
      <span>Page {currentPage} of {totalPages}</span>
      <button onClick={zoomIn}>Zoom In</button>
      <button onClick={() => goToPage(1)}>Go to First Page</button>
    </div>
  );
}

Props

<PdfViewer> / <PdfViewer.Root>

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | string \| File \| ArrayBuffer \| Uint8Array | — | PDF source (required) | | defaultPage | number | 1 | Initial page | | defaultZoom | number \| 'fit-width' \| 'fit-page' | 1 | Initial zoom | | theme | 'light' \| 'dark' \| 'system' | 'system' | Color theme | | onPageChange | (page: number) => void | — | Page change callback | | onDocumentLoad | (info: DocumentInfo) => void | — | Document load callback | | className | string | — | Additional CSS class |

<PdfViewer.Download>

| Prop | Type | Description | |------|------|-------------| | fileName | string | Override downloaded file name |

Theming

Override CSS custom properties to customize the look:

.pdf-viewer {
  /* Colors */
  --pdf-primary: #18181b;
  --pdf-primary-hover: #27272a;
  --pdf-bg: #fafafa;
  --pdf-text: #18181b;
  --pdf-text-muted: #71717a;

  /* Toolbar */
  --pdf-toolbar-bg: #f0f0f2;
  --pdf-toolbar-border: #e4e4e7;

  /* Buttons */
  --pdf-btn-hover: #f4f4f5;
  --pdf-btn-active: #e4e4e7;

  /* Inputs */
  --pdf-input-bg: #ffffff;
  --pdf-input-border: #d4d4d8;
  --pdf-input-focus-border: #71717a;

  /* Sidebar */
  --pdf-sidebar-bg: #f0f0f2;
  --pdf-sidebar-width: 180px;

  /* Pages */
  --pdf-page-bg: #ffffff;
  --pdf-page-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --pdf-page-gap: 12px;
  --pdf-placeholder-bg: #f4f4f5;

  /* Search */
  --pdf-search-highlight: #fde68a;

  /* Thumbnails */
  --pdf-thumbnail-border: transparent;
  --pdf-thumbnail-active-border: var(--pdf-primary);

  /* Dropdowns */
  --pdf-dropdown-bg: #ffffff;
  --pdf-dropdown-border: #d4d4d8;
  --pdf-dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
  --pdf-dropdown-hover: #f4f4f5;
  --pdf-dropdown-icon: #52525b;
}

For a completely custom look, skip importing styles.css and style from scratch using the BEM class names.

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Arrow Left / Page Up | Previous page | | Arrow Right / Page Down | Next page | | h | Toggle cursor mode (text select / hand) | | Ctrl/Cmd + = | Zoom in | | Ctrl/Cmd + - | Zoom out | | Ctrl/Cmd + 0 | Reset zoom | | Ctrl/Cmd + F | Open search | | Enter | Next search match | | Shift + Enter | Previous search match | | Escape | Close search / modal / menu |

Support

License

MIT