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