Example: Display the current page

We can use the CurrentPageLabel component provided by the Page Navigation plugin to display the current page.

import { pageNavigationPlugin } from '@react-pdf-viewer/page-navigation';

const pageNavigationPluginInstance = pageNavigationPlugin();
const { CurrentPageLabel } = pageNavigationPluginInstance;

It has a render prop hich is a function accepting RenderCurrentPageLabelProps parameter and returns a React element. RenderCurrentPageLabelProps consists of the following properties:

Property	Type	Description	From
`currentPage`	`number`	The current page number	2.0.0
`numberOfPages`	`number`	The total number of pages	2.0.0

Here is an example showing the current page number at the top:

import { RenderCurrentPageLabelProps } from '@react-pdf-viewer/page-navigation';

// Your render function
return (
    <div
        style={{
            border: '1px solid rgba(0, 0, 0, 0.3)',
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
        }}
    >
        <div
            style={{
                alignItems: 'center',
                backgroundColor: '#eeeeee',
                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
                display: 'flex',
                justifyContent: 'center',
                padding: '8px',
            }}
        >
            <CurrentPageLabel>
            {
                (props: RenderCurrentPageLabelProps) => (
                    <span>{`${props.currentPage + 1} of ${props.numberOfPages}`}</span>
                )
            }
            </CurrentPageLabel>
        </div>
        <div
            style={{
                flex: 1,
                overflow: 'hidden',
            }}
        >
            <Viewer
                fileUrl='/assets/pdf-open-parameters.pdf'
                plugins={[
                    pageNavigationPluginInstance,
                ]}
            />
        </div>
    </div>
);

In the example below, you can scroll up or down to see the current page is updated.

(The sample code)

1 of 0

Example: Display the current page

Related examples