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
Name | Type | Description |
---|---|---|
dragging | boolean | Indicate if a file is currently being dragged over the zone |
handleDragLeave | (event: React.DragEvent) => void | Handler function for when the drag movement leaves the drop zone |
handleDrop | (event: React.DragEvent) => void | Handler function for when a file is dropped in the drop zone |
handleDragEnter | (event: React.DragEvent) => void | Handler 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> )}
import { RPConfig, RPProvider, RPPages, RPDefaultLayout, useDropFileZoneContext} from '@pdf-viewer/react'import { useCallback, type FC, type DragEvent } from 'react'
const CustomDropFileZone: FC = () => { const { dragging, handleDragLeave, handleDrop } = useDropFileZoneContext() const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => { 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: FC = () => { return ( <RPConfig> <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf"> <CustomDropFileZone /> <RPDefaultLayout> <RPPages /> </RPDefaultLayout> </RPProvider> </RPConfig> )}