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

Name	Type	Description
focusedPage	number	The current page number that is currently focused or being viewed
setFocusedPage	(page: number | string) => boolean	Update the focused page. Return true if successful and false if otherwise
totalPages	number	The total number of pages in a PDF document
setTotalPages	(page: number) => void	Update the total number of pages in a PDF document
prevPage	() => void	Navigate to the previous page if it exists
nextPage	() => void	Navigate 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.

JSX

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 style={{ height: '660px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

TSX

import {
  RPConfig,
  RPProvider,
  RPDefaultLayout,
  RPPages,
  usePaginationContext
} from '@pdf-viewer/react'
import { type FC } from 'react'

const CustomPagination: FC = () => {
  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: FC = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <CustomPagination />
        <RPDefaultLayout style={{ height: '660px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}