Hooks

React PDF provides a collection of custom hooks that make it easy to interact with PDF documents in your React applications. These hooks encapsulate common PDF-related functionality and state management, allowing you to build powerful PDF viewing experiences with minimal boilerplate.

Available Hooks

Hook	Description
useDarkModeContext	Access and control the dark mode state of React PDF
useDropFileZoneContext	Access drag and drop function of React PDF
useDocumentContext	Access the loaded PDF document and its properties
useFileDownload	Access the download function of the current PDF file
useFullScreenContext	Access and control the fullscreen state of React PDF
useHighlightContext	Access and control the Highlight specified keyword(s)
useOpenFileContext	Access the function of opening a PDF file
usePaginationContext	Access the pagination controller function
usePrintContext	Access the print function of the current PDF file
useRotateContext	Access the rotate function of the current PDF file
useSearchContext	Access the function to search through the current PDF file
useZoomContext	Access the zoom function and state of React PDF

Basic Usage

To use a hook, you will need to use it inside a component which is a child of the RPProvider. Here is a simple example of using a few common hooks:

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

const CustomPdfViewer: FC = () => {
  const { currentPage, totalPages, goToNextPage, goToPreviousPage } = usePaginationContext()
  const { isFullScreen, enterFullScreen, exitFullScreen } = useFullScreenContext()
  return (
    <>
      <p>
        Page {currentPage} of {totalPages}
      </p>
      <button onClick={goToPreviousPage}>Previous</button>
      <button onClick={goToNextPage}>Next</button>
      <div>
        <button onClick={isFullScreen ? exitFullScreen : enterFullScreen}>
          {isFullScreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
        </button>
      </div>
    </>
  )
}
const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <CustomPdfViewer />
        <RPPages />
      </RPProvider>
    </RPConfig>
  )
}
export default AppPdfViewer

Benefits of Using Hooks

• Simplified State Management: Hooks handle complex PDF-related state management internally
• Reusable Logic: Extract and reuse PDF functionality across components
• Type Safety: Full TypeScript support for better development experience
• Performance Optimized: Hooks are optimized for performance and memory usage
• Separation of Concerns: Clean separation between PDF logic and UI components

For detailed information about each hook, please refer to each individual documentation pages linked in the table above.