Docs
Plugins
Localizations
Examples
Updates
Purchase

Use the RotatePage component to rotate a particular page

The rotate plugin provides the `RotatePage` component for rotating a given page. Its children is a function that accepts a `RenderRotatePageProps` parameter and returns a React element.
const rotatePluginInstance = rotatePlugin();
const { RotatePage } = rotatePluginInstance;


<RotatePage>
    {(props: RenderRotatePageProps) => (
        // Renders the output
    )}
</RotatePage>
The `RenderRotatePageProps` type provides the `onRotatePage` property that can be used to rotate a single page in the given direction:
onRotatePage(pageIndex: number, direction: RotateDirection)
`pageIndex` is the zero-based page index of the document, whereas `direction` represents the direction that you want the page to rotate to.
The following example creates two different buttons for rotating the first page:
<RotatePage>
    {(props) => (
        <PrimaryButton onClick={() => props.onRotatePage(0, RotateDirection.Forward)}>
            Rotate the first page forward
        </PrimaryButton>
    )}
</RotatePage>
<RotatePage>
    {(props) => (
        <PrimaryButton onClick={() => props.onRotatePage(0, RotateDirection.Backward)}>
            Rotate the first page backward
        </PrimaryButton>
    )}
</RotatePage>
(The sample code)
Of course, rotating a page also reflects its corresponding thumbnail as you can see in the example below.
(The sample code)
There are more different approaches to provide the ability of rotating a single page. See the examples below for more details:
If you want to integrate the back-end when a single page is rotated, please take a look at the `onRotatePage` event.

See also