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:

The pages are numbered by the Roman numerals system such as i, ii, iii, etc.
The document is extracted from another document. In this case, the page numbers in the original document will be displayed.

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.

Property	Type	Description	From
`currentPage`	`number`	The current page number	2.0.0
`numberOfPages`	`number`	The total number of pages	2.0.0
`pageLabel`	`string`	The page label	2.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';

<CurrentPageLabel>
    {(props: RenderCurrentPageLabelProps) => (
        <>
            {`${props.currentPage + 1} ${
                props.pageLabel === `${props.currentPage + 1}` ? '' : ` (${props.pageLabel})`
            } of ${props.numberOfPages}`}
        </>
    )}
</CurrentPageLabel>;

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

(The sample code)

Show the custom page label for the current page

See also