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.

// Your render function
return (
    <div
        style={{
            border: '1px solid rgba(0, 0, 0, 0.3)',
            display: 'flex',
            height: '750px',
        }}
    >
        <Viewer
            fileUrl='/assets/pdf-open-parameters.pdf'
            plugins={[
                // Register the drop plugin
                dropPluginInstance,
            ]}
        />
    </div>
);

Play with the demo below by dragging a PDF document and dropping it on the element that shows the current document.

(The sample code)