Customize the rotate buttons

The `Rotate` component provided by the Rotate plugin is used to create a custom rotate button. It has two properties:

*: Required parameter

Property	Type	Description	From
`direction`*	`RotateDirection`	The rotate direction	2.0.0
`children`	`RenderRotateProps => ReactElement`	The render prop	2.0.0

`RotateDirection` provided by the `@react-pdf-viewer/core` package is an enum with two possible values:

`Backward` if you want to rotate counterclockwise
`Forward` if you want to rotate clockwise

The sample code below creates a button that clicking it will rotate the document counterclockwise:

import { RotateDirection } from '@react-pdf-viewer/core';
import { RenderRotateProps, rotatePlugin } from '@react-pdf-viewer/rotate';

// Your render function
const rotatePluginInstance = rotatePlugin();
const { Rotate } = rotatePluginInstance;

<Rotate direction={RotateDirection.Backward}>
    {(props: RenderRotateProps) => (
        <button
            style={{
                backgroundColor: '#357edd',
                border: 'none',
                borderRadius: '4px',
                color: '#ffffff',
                cursor: 'pointer',
                padding: '8px',
            }}
            onClick={props.onClick}
        >
            Rotate backward
        </button>
    )}
</Rotate>;

(The sample code)

Customize the rotate buttons

See also