Skip to content

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

HookDescriptionVersion
useDarkModeContextAccess and control the dark mode state of React PDF^1.0.0
useDropFileZoneContextAccess drag and drop function of React PDF^1.0.0
useDocumentContextAccess the loaded PDF document and its properties^1.0.0
useFileDownloadAccess the download function of the current PDF file^1.0.0
useFullScreenContextAccess and control the fullscreen state of React PDF^1.0.0
useHighlightContextAccess and control the Highlight specified keyword(s)^1.4.0
useOpenFileContextAccess the function of opening a PDF file^1.0.0
usePaginationContextAccess the pagination controller function^1.0.0
usePrintContextAccess the print function of the current PDF file^1.0.0
useRotateContextAccess the rotate function of the current PDF file^1.0.0
useSearchContextAccess the function to search through the current PDF file^1.0.0
useZoomContextAccess the zoom function and state of React PDF^1.0.0

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.