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.
1 of 8