useDropFileZoneContext

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

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.

JSX

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 style={{ height: '600px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

TSX

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 style={{ height: '600px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}