Add buttons to rotate a single thumbnail and its associated page

In this example, we will learn how to rotate a single thumbnail using a custom renderer. As we know, the thumbnail plugin provides the `Thumbnails` component to preview the pages of a PDF document. However, it displays the thumbnail and index of each page by default.

Imagine that in our example, each thumbnail item would like to have two buttons for rotating the thumbnail in the forward and backward directions.

The `renderThumbnailItem` property comes in handy. It provides a free way of rendering thumbnail items as following:

import type { RenderThumbnailItemProps } from '@react-pdf-viewer/thumbnail';

<Thumbnails renderThumbnailItem={renderThumbnailItem} />

const renderThumbnailItem = (props: RenderThumbnailItemProps) => (
    // Your custom thumbnail item
);

The `RenderThumbnailItemProps` type contains the following properties:

Property	Type	Description	From
`currentPage`	`number`	The current page number	3.0.0
`key`	`string`	The unique key that should be used as the `key` property of the thumbnail item component	3.0.0
`numPages`	`number`	The total number of pages	3.0.0
`pageIndex`	`number`	The corresponding page index	3.0.0
`renderPageLabel`	`React.ReactElement`	The page label which can be the page index or custom page label if there is any	3.0.0
`renderPageThumbnail`	`React.ReactElement`	The thumbnail image	3.0.0
`onJumpToPage`	`Function`	Jump to the corresponding page	3.0.0
`onRotatePage`	`Function`	Rotate to the corresponding page	3.2.0

It is quite easy for us to add some buttons right below the thumnails:

const renderThumbnailItem = (props: RenderThumbnailItemProps) => (
    <div key={props.key}>
        <div style={{ marginBottom: '0.5rem' }} onClick={props.onJumpToPage}>
            {props.renderPageThumbnail}
        </div>
        <div>
            <button>Rotate clockwise</button>
            <button>Rotate counterclockwise</button>
        </div>
    </div>
);

By using the `onRotatePage` property, we can handle the `onClick` event of these buttons that rotate the target thumbnail in the given direction:

import { RotateDirection } from '@react-pdf-viewer/core';

<button onClick={() => props.onRotatePage(RotateDirection.Forward)}>
    Rotate clockwise
</button>
<button onClick={() => props.onRotatePage(RotateDirection.Backward)}>
    Rotate counterclockwise
</button>

To improve the look and feel of the buttons, the following example uses more components such as `MinimalButton`, `Tooltip` which are provided by the `@react-pdf-viewer/core` package.

(The sample code)

Customize the Thumbnails tab in the default layout

If you want to have the same customized thumbnails with the default layout, then please take a look at the Customize thumbnail items example.

The basic idea is to replace the existing `Thumbnail` tab with our own tab as shown below:

import { ThumbnailIcon } from '@react-pdf-viewer/default-layout';

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    sidebarTabs: (defaultTabs) =>
        [
            {
                content: <Thumbnails renderThumbnailItem={renderThumbnailItem} />,
                icon: <ThumbnailIcon />,
                title: 'Thumbnails',
            },
        ].concat(defaultTabs.slice(1)),
});

where the `Thumbnails` component is taken from the instance of default layout plugin:

const thumbnailPluginInstance = defaultLayoutPluginInstance.thumbnailPluginInstance;
const { Thumbnails } = thumbnailPluginInstance;

(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.

Add buttons to rotate a single thumbnail and its associated page

Customize the Thumbnails tab in the default layout

See also