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:
`currentPage``number`The current page number3.0.0
`key``string`The unique key that should be used as the `key` property of the thumbnail item component3.0.0
`numPages``number`The total number of pages3.0.0
`pageIndex``number`The corresponding page index3.0.0
`renderPageLabel``React.ReactElement`The page label which can be the page index or custom page label if there is any3.0.0
`renderPageThumbnail``React.ReactElement`The thumbnail image3.0.0
`onJumpToPage``Function`Jump to the corresponding page3.0.0
`onRotatePage``Function`Rotate to the corresponding page3.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}>
<button>Rotate clockwise</button>
<button>Rotate counterclockwise</button>
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 onClick={() => props.onRotatePage(RotateDirection.Backward)}>
Rotate counterclockwise
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.

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',
where the `Thumbnails` component is taken from the instance of default layout plugin:
const thumbnailPluginInstance = defaultLayoutPluginInstance.thumbnailPluginInstance;
const { Thumbnails } = thumbnailPluginInstance;
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