Show the custom page label for the current page

The Page Navigation plugin provides the `CurrentPageLabel` component to display the current page index. However, these are cases where the pages are numbered by custom labels, for example:
In those cases, we would like to display the page labels in addition to the page indices.
As we know, the `CurrentPageLabel` component has a render prop which is a function accepting a `RenderCurrentPageLabelProps` parameter and returns a React element.
The `RenderCurrentPageLabelProps` type introduces a new `pageLabel` parameter which indicates the page label.
`currentPage``number`The current page number2.0.0
`numberOfPages``number`The total number of pages2.0.0
`pageLabel``string`The page label2.10.0
The following sample code displays the custom page label if it is different than the page index:
import type { RenderCurrentPageLabelProps } from '@react-pdf-viewer/page-navigation';
{(props: RenderCurrentPageLabelProps) => (
{`${props.currentPage + 1} ${
props.pageLabel === `${props.currentPage + 1}` ? '' : ` (${props.pageLabel})`
} of ${props.numberOfPages}`}
Here is an example showing the page number and label of the current page from a document whose pages are extracted from another document:
It is recommended to use the same approach for the page thumbnails

See also