Zoom

Zoom in steps or through presets, with the toolbar, the keyboard or Ctrl/⌘ + wheel, between limits you choose.

Basics

The zoom buttons change the scale in 5% steps between 25% and 500%; the label shows the rounded percentage.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { return <PdfViewer source="/samples/letter-3pages.pdf" />; }

At 100% a page is shown at its true size (one PDF point per CSS pixel). While at the default scale, a page wider than the viewer is shrunk to fit; once zoomed, it keeps its size and the document area scrolls. +, - and 0 zoom from the keyboard.

Presets

zoomLevels replaces the fixed step with a ladder of presets. zoomReset turns the percentage into a button that returns to defaultScale.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; const ZOOM_LEVELS = [0.5, 0.75, 1, 1.5, 2, 3]; export default function Demo() { return ( <PdfViewer source="/samples/letter-3pages.pdf" zoomLevels={ZOOM_LEVELS} minScale={0.5} maxScale={3} zoomReset /> ); }

Wheel and pinch

wheelZoom zooms with Ctrl/⌘ + mouse wheel and trackpad pinch, anchored at the pointer. A plain wheel still scrolls the page.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // Hold Ctrl (⌘ on macOS) and scroll, or pinch on a trackpad, over the page. return <PdfViewer source="/samples/letter-3pages.pdf" wheelZoom zoomReset />; }

Controlled zoom

scale and onScaleChange put the zoom level in your state, for example to remember it per user. Values outside [minScale, maxScale] are clamped.

const [scale, setScale] = useState(1.25);

<PdfViewer source={url} scale={scale} onScaleChange={setScale} />;

Customization

Change the step with scaleStep, the wording with labels, and the look with CSS variables.

import { PdfViewer, type PdfViewerLabels } from '@kingtech/react-pdf-viewer'; import type { CSSProperties } from 'react'; const labels: Partial<PdfViewerLabels> = { zoomLevel: (percent) => `${percent} %`, zoomIn: 'Enlarge', zoomOut: 'Reduce', }; const style = { '--rpv-toolbar-bg': '#1e293b', '--rpv-label-font-size': '13px', '--rpv-button-size': '38px', } as CSSProperties; export default function Demo() { return ( <PdfViewer source="/samples/letter-3pages.pdf" scaleStep={0.1} labels={labels} style={style} /> ); }

See the customization guide and the full list of CSS variables.

Advanced / escape hatch

setScale(scale), zoomIn(), zoomOut() and resetZoom() on the imperative API zoom from your own controls; canZoomIn and canZoomOut tell you when to disable them. To fit the page to the viewer instead of choosing a percentage, see Fit modes.

Limitations

Very high zoom is capped by the canvas budget. Above maxCanvasPixels (16,777,216 pixels per page by default) the page is rendered at a lower resolution and scaled up, so it looks softer. Workaround: raise maxCanvasPixels on desktop-only apps, or lower maxScale. See Rendering.
Browser zoom is separate. Ctrl/⌘ + wheel zooms the page only when wheelZoom is on and the pointer is over the document; elsewhere the browser zooms the whole page as usual.

API

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