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 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

• Drag and drop a PDF document to open it