Show custom page labels for thumbnails

By default, each page thumbnail displays the corresponding page number. It will replace the page number with a custom page label if there is any.
Here are a few examples where we will see custom page labels:
The following example displays the page labels of a sample document whose pages are extracted from another one:

Customize page labels

If you think this kind of page numbers are confusing to the users, then you can customize them.
Available from v2.10.0, the thumbnail plugin provides the `renderCurrentPageLabel` option for customizing page labels:
import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail';
const thumbnailPluginInstance = thumbnailPlugin({
The `renderCurrentPageLabel` option is a function that accepts a `RenderCurrentPageLabelProps` parameter and returns a React element.
The `RenderCurrentPageLabelProps` type consists of the following properties:
`currentPage``number`The current page number2.10.0
`numPages``number`The total number of pages2.10.0
`pageIndex``number`The page number of the corresponding page. It is the zero-based value2.10.0
`pageLabel``string`The page label of the corresponding page2.10.0
The sample code below displays the page index and the page label if it is different than the page index:
import type { RenderCurrentPageLabel, RenderCurrentPageLabelProps } from '@react-pdf-viewer/thumbnail';
const renderCurrentPageLabel: RenderCurrentPageLabel = (props: RenderCurrentPageLabelProps) => (
{props.pageIndex + 1}
{props.pageLabel !== `${props.pageIndex + 1}` && `(${props.pageLabel})`}
const thumbnailPluginInstance = thumbnailPlugin({
It is recommended to use the same approach for the current page label

See also