useOpenFileContext

The useOpenFileContext hook provides functionality to open a new PDF file within the React PDF viewer.

It enables you to create custom file upload buttons or other UI elements that can trigger the file selection dialog and handle PDF file uploads.

Return Type

Name	Type	Description
openFile	() => void	Open the file selection dialog

Usage

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

This example shows how to create a CustomUploadButton component which uses useOpenFileContext hook to handle file uploads.

JSX

import {
  RPConfig,
  RPTheme,
  RPProvider,
  RPDefaultLayout,
  RPPages,
  useOpenFileContext
} from '@pdf-viewer/react'

const CustomUploadButton = () => {
  const { openFile } = useOpenFileContext()
  return (
    <div>
      <button onClick={openFile}>Upload !</button>
    </div>
  )
}

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        {/* Custom upload button */}
        <CustomUploadButton />
        <RPDefaultLayout style={{ height: '660px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

TSX

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

const CustomUploadButton: FC = () => {
  const { openFile } = useOpenFileContext()
  return (
    <div>
      <button onClick={openFile}>Upload !</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">
        {/* Custom upload button */}
        <CustomUploadButton />
        <RPDefaultLayout style={{ height: '660px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}