Rotate Plugin

The Rotate Plugin allows you to change the orientation of the entire document. It applies a rotation to every page, letting users view content in 90-degree increments.

Installation

This plugin is available as a separate NPM package.

npm install @embedpdf/plugin-rotate

pnpm add @embedpdf/plugin-rotate

yarn add @embedpdf/plugin-rotate

bun add @embedpdf/plugin-rotate

Registration

Import RotatePluginPackage and add it to the plugins array. You can also specify a default rotation to apply when a document is first loaded.

import { createPluginRegistration } from '@embedpdf/core'
import { EmbedPDF } from '@embedpdf/core/react'
import { Rotation } from '@embedpdf/models'
import { RotatePluginPackage } from '@embedpdf/plugin-rotate/react'
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, {
    /* ... */
  }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
 
  // Register and configure the rotate plugin
  createPluginRegistration(RotatePluginPackage, {
    defaultRotation: Rotation.Degree90, // Start documents rotated 90° clockwise
  }),
]
 
// ... rest of your component

Usage

The plugin provides the useRotate hook to control the rotation from your UI and a <Rotate /> component to apply the visual transformation to each page.

Building a Rotate Toolbar

Use the useRotate hook to get the current rotation state and the provides object, which contains methods to change it. The rotation state is a number from the Rotation enum (0 = 0°, 1 = 90°, 2 = 180°, 3 = 270°).

import { useRotate } from '@embedpdf/plugin-rotate/react'
 
export const RotateToolbar = () => {
  const { rotation, provides: rotate } = useRotate()
 
  if (!rotate) {
    return null
  }
 
  return (
    <div className="toolbar">
      <span>Current Rotation: {rotation * 90}°</span>
      <button onClick={rotate.rotateBackward}>Rotate Left</button>
      <button onClick={rotate.rotateForward}>Rotate Right</button>
    </div>
  )
}

Applying the Rotation

For the rotation to be visible, you must wrap your page layers with the <Rotate /> component inside the Scroller’s renderPage function. This component calculates and applies the necessary CSS transform. It’s important to place it outside the PagePointerProvider to ensure interactions are correctly mapped to the rotated page.

// Inside your main PDFViewer component
<Scroller
  renderPage={({ width, height, pageIndex, scale, rotation }) => (
    <Rotate pageSize={{ width, height }}>
      <PagePointerProvider
        pageIndex={pageIndex}
        {/* ... other props */}
      >
        <RenderLayer pageIndex={pageIndex} scale={scale} />
      </PagePointerProvider>
    </Rotate>
  )}
/>

Live Example

This is a complete viewer that uses the <RotateToolbar /> and correctly applies the <Rotate /> component to each page.

API Reference

Configuration (RotatePluginConfig)

Hook: useRotate()

Connects your component to the rotate plugin’s state and functions.

Returns

RotateCapability Methods

Component: <Rotate />

A wrapper component that applies the correct CSS rotation transform to its children.

Props