React PDF Kit 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 using the React PDF Viewer component.

Available Hooks

Hook	Description	Version
useDarkModeContext	Access and control the dark mode state of React PDF	^1.0.0
useDropFileZoneContext	Access drag and drop function of React PDF	^1.0.0
useDocumentContext	Access the loaded PDF document and its properties	^1.0.0
useElementPageContext	Access the function to add an element in a specific PDF page Remark: This is an Organization feature	^1.8.0
useFileDownload	Access the download function of the current PDF file	^1.0.0
useFullScreenContext	Access and control the fullscreen state of React PDF	^1.0.0
useHighlightContext	Access and control the Highlight specified keyword(s)	^1.4.0
useOpenFileContext	Access the function of opening a PDF file	^1.0.0
usePageRotateContext	Access the function to rotate a PDF page Remark: This is an Organization feature	^1.8.0
usePaginationContext	Access the pagination controller function	^1.0.0
usePrintContext	Access the print function of the current PDF file	^1.0.0
useRotateContext	Access the rotate function of the current PDF file	^1.0.0
useSearchContext	Access the function to search through the current PDF file	^1.0.0
useViewModeContext	Access the view mode function and state of React PDF	^1.0.0
useZoomContext	Access 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,
  RPLayout
} from '@react-pdf-kit/viewer'

const CustomPdfViewer: FC = () => {
  const { focusedPage, totalPages, nextPage, prevPage } = usePaginationContext()
  const { isFullScreen, toggleFullScreen } = useFullScreenContext()
  return (
    <>
      <p>
        Page {focusedPage} of {totalPages}
      </p>
      <button onClick={prevPage}>Previous</button>
      <button onClick={nextPage}>Next</button>
      <div>
        <button onClick={toggleFullScreen}>
          {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 />
        <RPLayout toolbar>
          <RPPages />
        </RPLayout>
      </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.