Rotation

Rotate pages in quarter turns, on top of the orientation each page already declares.

Basics

The rotate button turns every page 90° clockwise; pages that declare their own rotation open upright.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // Page 2 of this sample has an intrinsic /Rotate 90: it opens in landscape. return <PdfViewer source="/samples/intrinsic-rotation.pdf" />; }

Rotation is added to each page’s intrinsic /Rotate value, so a scanned landscape page stays landscape. r and Shift + R rotate clockwise and counter-clockwise from the keyboard.

Controlled rotation

rotation and onRotationChange accept 0, 90, 180 or 270.

import { PdfViewer, type Rotation } from '@kingtech/react-pdf-viewer'; import { useState } from 'react'; const turn = (rotation: Rotation, quarters: number) => ((((rotation + quarters * 90) % 360) + 360) % 360) as Rotation; export default function Demo() { const [rotation, setRotation] = useState<Rotation>(90); return ( <> <p className="demo-controls"> <button type="button" className="demo-button" onClick={() => setRotation((r) => turn(r, -1))} > ↺ Counter-clockwise </button> <button type="button" className="demo-button" onClick={() => setRotation((r) => turn(r, 1))} > ↻ Clockwise </button> <output>{rotation}°</output> </p> <PdfViewer source="/samples/letter-3pages.pdf" rotation={rotation} onRotationChange={setRotation} /> </> ); }

Customization

Start rotated with defaultRotation, rename the button with labels.rotate, or choose which actions the toolbar shows.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { return ( <PdfViewer source="/samples/letter-3pages.pdf" defaultRotation={180} labels={{ rotate: 'Turn page' }} toolbar={{ actions: ['previousPage', 'pageIndicator', 'nextPage', 'rotate'] }} /> ); }

See the customization guide.

Advanced / escape hatch

rotate('cw') and rotate('ccw') on the imperative API rotate without controlling the value. PdfPageCanvas takes the same rotation prop in headless layouts.

Limitations

Rotation applies to the whole document. Every page turns by the same amount. Workaround: render individual pages with PdfPageCanvas, each with its own rotation.
Hidden in compact layouts. Below compactBreakpoint the rotate button is hidden outside fullscreen, as it is by default in hiddenWhenCompact. Workaround: pass toolbar={{ hiddenWhenCompact: [] }}; see Toolbar.
Rotation is not saved into the file. Downloads and prints use the original page orientation.

API

Rotation — Clockwise rotation in degrees, relative to the page's natural orientation.
PdfViewerProps — Props for PdfViewer. Every piece of state supports the value / defaultValue / onChange trio.