Skip to content
React PDF Viewer

Search

Usage

Render a document, turn on the features you need, and connect the viewer to your app's state.

Prerequisites

The package, pdfjs-dist and the stylesheet are installed as described in Installation.

Installation

No further setup is needed to follow this page. For production, also self-host the PDF.js worker.

Minimal example

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

export function Report({ url }: { url: string }) {
  return <PdfViewer source={url} fileName="report.pdf" />;
}

Out of the box you get a single-page view with a toolbar below it: zoom in 5% steps between 25% and 500%, page navigation, fullscreen, rotation, download and print. Pages wider than the viewer shrink to fit.

Turn on features

Each feature beyond the defaults is one prop:

<PdfViewer
  source={url}
  layout="continuous" // scroll through all pages
  thumbnails // page sidebar
  search // find bar with highlighting
  pageInput // type a page number
  zoomReset // click the zoom label to reset
  annotationLayer // clickable links
  wheelZoom // Ctrl/⌘ + wheel zoom
  className="rpv-theme-auto" // dark mode that follows the OS
/>

Every feature has its own page with live demos: see All features.

Connect to your state

Control any piece of state with x / onXChange, for example to keep the page in the URL:

const [page, setPage] = useState(1);

<PdfViewer source={url} page={page} onPageChange={setPage} />;

See Controlled state and the imperative API.

Handle errors

<PdfViewer source={url} onError={(error) => report(error.code, error.message)} />

The viewer already shows an error view with Retry; onError is for logging. See Error states.

Verify

Open the page: the document renders with the features you enabled. Resize the window below 960px to see the compact layout, and narrow the container to watch toolbar actions move into the More actions menu.

Next steps