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';

Usage

  • Import the plugin:
import { rotatePlugin } from '@react-pdf-viewer/rotate';
  • Create the plugin instance:
const rotatePluginInstance = rotatePlugin();

The plugin instance rotatePluginInstance provides the following properties:

PropertyTypeDescriptionFrom
RotateReactElementCustomizable rotate button2.0.0
RotateBackwardButtonReactElementThe default button to rotate counterclockwise2.0.0
RotateBackwardMenuItemReactElementCustomizable menu item to rotate counterclockwise2.0.0
RotateForwardButtonReactElementThe default button to rotate clockwise2.0.0
RotateForwardMenuItemReactElementCustomizable menu item to rotate clockwise2.0.0
  • Finally, register the rotate plugin instance:
<Viewer
    fileUrl='...'
    plugins={[
        rotatePluginInstance,
    ]}
/>

Properties

The rotate plugin provides other useful properties as following:

import { RotateBackwardIcon, RotateForwardIcon } from '@react-pdf-viewer/rotate';
PropertyTypeDescriptionFrom
RotateBackwardIconReactElementThe rotate counterclockwise icon2.0.0
RotateForwardIconReactElementThe rotate clockwise icon2.0.0

Examples