Skip to content

useOpenFileContext

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

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

NameTypeDescription
openFile() => voidOpen 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.

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>
<RPPages />
</RPDefaultLayout>
</RPProvider>
</RPConfig>
)
}