Drop plugin

The drop plugin allows to open a PDF document by dragging and dropping it on the viewer container element.

It adds an element on top of the container element indicating that you can drag the document:

Drop documentDrop document

Install

npm install '@react-pdf-viewer/drop';

Usage

  • Import the plugin and styles:
import { dropPlugin } from '@react-pdf-viewer/drop';

// Import styles
import '@react-pdf-viewer/drop/lib/styles/index.css';
  • Create the plugin instance:
const dropPluginInstance = dropPlugin();
  • Finally, register the drop plugin instance.
<Viewer
    fileUrl='...'
    plugins={[
        // Register the drop plugin
        dropPluginInstance,
    ]}
/>

Example