Page navigation

Move between pages with the toolbar, the keyboard or your own controls, and keep the current page in sync with your app.

Basics

The toolbar shows the current page and total, with previous and next buttons that disable at the ends.

The page label is a polite live region, so screen readers announce page changes. With focus inside the viewer, ← →, PageUp PageDown and Home End also navigate; see Keyboard shortcuts.

Controlled page

Pass page and onPageChange to drive navigation from your app, for example from a table of contents or the URL.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import { useState } from 'react'; const CHAPTERS = [ { title: 'Introduction', page: 1 }, { title: 'Chapter 2', page: 11 }, { title: 'Chapter 3', page: 21 }, { title: 'Appendix', page: 40 }, ]; export default function Demo() { const [page, setPage] = useState(1); return ( <> <nav className="demo-controls" aria-label="Chapters"> {CHAPTERS.map((chapter) => ( <button key={chapter.page} type="button" className="demo-button" aria-current={page >= chapter.page ? 'true' : undefined} onClick={() => setPage(chapter.page)} > {chapter.title} </button> ))} <output>Page {page}</output> </nav> <PdfViewer source="/samples/multipage.pdf" page={page} onPageChange={setPage} /> </> ); }

Out-of-range values are clamped: page={99} on a 40-page document shows page 40 and calls onPageChange(40) once. For the full pattern see Controlled state.

Initial page

Uncontrolled viewers start on defaultPage (default 1), and every new source opens on defaultPage again.

<PdfViewer source={report} defaultPage={3} />

Deep links

Keep the page in the address bar so every view is shareable: control page (and scale or rotation if you like) from the query string, and write changes back in onPageChange. See Controlled state.

Customization

Rename the controls and the page label through labels, and restyle the toolbar with CSS variables.

import { PdfViewer, type PdfViewerLabels } from '@kingtech/react-pdf-viewer'; import type { CSSProperties } from 'react'; // Module scope keeps the object stable between renders. const labels: Partial<PdfViewerLabels> = { previousPage: 'Previous sheet', nextPage: 'Next sheet', pageIndicator: (page, total, { formatNumber }) => `Sheet ${formatNumber(page)} of ${formatNumber(total)}`, }; const style = { '--rpv-toolbar-bg': '#0f766e', '--rpv-label-font-weight': '500', } as CSSProperties; export default function Demo() { return <PdfViewer source="/samples/multipage.pdf" labels={labels} style={style} />; }

To let users type a page number, turn on pageInput. More options: the customization guide.

Advanced / escape hatch

goToPage, nextPage and previousPage on the imperative API navigate without controlling the page, which is convenient for buttons outside the viewer.

Limitations

One page at a time by default. The default layout shows a single page. Workaround: set layout="continuous" for scrolling through all pages; see Continuous layout.
No outline (bookmarks) panel. The document outline embedded in some PDFs is not shown. Workaround: build a table of contents from getDocument().getOutline() on the imperative API and drive page from it.

API

PdfViewerProps — Props for PdfViewer. Every piece of state supports the value / defaultValue / onChange trio.