Rotate plugin

The `rotate` plugin provides buttons to rotate the document clockwise or counterclockwise. They come with the default styles and provide the ability of customization.

Install

npm install '@react-pdf-viewer/rotate';
The `rotate` plugin is included in the toolbar and default-layout plugins

Usage

1. Import the plugin
import { rotatePlugin } from '@react-pdf-viewer/rotate';
2. Create the plugin instance
const rotatePluginInstance = rotatePlugin();
The plugin instance `rotatePluginInstance` provides the following properties:
PropertyTypeDescriptionFrom
`Rotate``ReactElement`Customizable rotate button2.0.0
`RotatePage``ReactElement`Rotate a single page3.2.0
`RotateBackwardButton``ReactElement`The default button to rotate counterclockwise2.0.0
`RotateBackwardMenuItem``ReactElement`Customizable menu item to rotate counterclockwise2.0.0
`RotateForwardButton``ReactElement`The default button to rotate clockwise2.0.0
`RotateForwardMenuItem``ReactElement`Customizable menu item to rotate clockwise2.0.0
3. Register the plugin
Register the `rotate` plugin instance:
<Viewer plugins={[rotatePluginInstance]} />

Properties

The `rotate` plugin provides other useful properties as following:
import { RotateBackwardIcon, RotateForwardIcon } from '@react-pdf-viewer/rotate';
PropertyTypeDescriptionFrom
`RotateBackwardIcon``ReactElement`The rotate counterclockwise icon2.0.0
`RotateForwardIcon``ReactElement`The rotate clockwise icon2.0.0

See also

Changelog

v3.2.0
  • Add new `RotatePage` component
  • The `RotateDirection` belongs to the `@react-pdf-viewer/core` package:
// v3.1.2 and previous versions
import { RotateDirection } from '@react-pdf-viewer/rotate';
// From v3.2.0
import { RotateDirection } from '@react-pdf-viewer/core';
v2.0.0
  • First release