Docs
Plugins
Localizations
Examples
Updates
Purchase

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:
(The sample code)

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({
    renderCurrentPageLabel,
});
The `renderCurrentPageLabel` option is a function that accepts a `RenderCurrentPageLabelProps` parameter and returns a React element.
The `RenderCurrentPageLabelProps` type consists of the following properties:
PropertyTypeDescriptionFrom
`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({
    renderCurrentPageLabel,
});
It is recommended to use the same approach for the current page label
(The sample code)

See also