Skip to content

useDropFileZoneContext

The useDropFileZoneContext hook provides access to the drag and drop functionality for PDF files in the React PDF.

It enables you to create custom drop zones for PDF files by providing state and event handlers for drag and drop interactions.

Return Type

NameTypeDescription
draggingbooleanIndicate if a file is currently being dragged over the zone
handleDragLeave(event: React.DragEvent) => voidHandler function for when the drag movement leaves the drop zone
handleDrop(event: React.DragEvent) => voidHandler function for when a file is dropped in the drop zone
handleDragEnter(event: React.DragEvent) => voidHandler function for when the drag movement enters the drop zone

Usage

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

This example shows how to create a CustomDropFileZone component which uses useDropFileZoneContext hook to manage file dropping.

import {
RPConfig,
RPProvider,
RPPages,
RPDefaultLayout,
useDropFileZoneContext
} from '@pdf-viewer/react'
import { useCallback } from 'react'
const CustomDropFileZone = () => {
const { dragging, handleDragLeave, handleDrop } = useDropFileZoneContext()
const handleDragOver = useCallback((e) => {
e.preventDefault()
e.stopPropagation()
}, [])
return (
<div
style={{
width: '200px',
height: '200px',
backgroundColor: 'red',
textAlign: 'center',
zIndex: 1000,
color: '#fff'
}}
onDragLeave={handleDragLeave}
onDragOver={handleDragOver}
onDrop={handleDrop}
>
<p>{dragging ? 'Drop' : 'Drag'} your file here!</p>
</div>
)
}
export const AppPdfViewer = () => {
return (
<RPConfig>
<RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
<CustomDropFileZone />
<RPDefaultLayout>
<RPPages />
</RPDefaultLayout>
</RPProvider>
</RPConfig>
)
}