Skip to content

usePaginationContext

The usePaginationContext hook provides access to pagination-related state and functions for navigating through pages in a PDF document.

This is useful when building custom navigation controls or displaying page information.

Return Type

NameTypeDescription
focusedPagenumberThe current page number that is currently focused or being viewed
setFocusedPage(page: number | string) => booleanUpdate the focused page. Return true if successful and false if otherwise
totalPagesnumberThe total number of pages in a PDF document
setTotalPages(page: number) => voidUpdate the total number of pages in a PDF document
prevPage() => voidNavigate to the previous page if it exists
nextPage() => voidNavigate to the next page if it exists

Usage

To ensure the pagination context can be accessed, you will need to use usePaginationContext inside a component which is a child of RPProvider.

This example shows how to create a CustomPagination component which uses usePaginationContext hook to handle pagination functionalities.

import {
RPConfig,
RPProvider,
RPDefaultLayout,
RPPages,
usePaginationContext
} from '@pdf-viewer/react'
const CustomPagination = () => {
const { focusedPage, setFocusedPage, totalPages, setTotalPages, prevPage, nextPage } = usePaginationContext()
return (
<div
style={{
display: 'flex',
gap: '10px',
justifyContent: 'space-between',
alignItems: 'center'
}}
>
<button onClick={prevPage}>Previous</button>
<span>
{focusedPage} / {totalPages}
</span>
<button onClick={nextPage}>Next</button>
</div>
)
}
export const AppPdfViewer = () => {
return (
<RPConfig licenseKey={YOUR_LICENSE_KEY}>
<RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
<CustomPagination />
<RPDefaultLayout>
<RPPages />
</RPDefaultLayout>
</RPProvider>
</RPConfig>
)
}