Example: Drag and drop a PDF document to open it

This example demonstrates how we can open a PDF document by using the Drop plugin.

import { Viewer } from '@react-pdf-viewer/core';
import { dropPlugin } from '@react-pdf-viewer/drop';

import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/drop/lib/styles/index.css';

// Render
const dropPluginInstance = dropPlugin();

<div
    style={{
        border: '1px solid rgba(0, 0, 0, 0.3)',
        display: 'flex',
        height: '750px',
    }}
>
    <Viewer
        fileUrl='...'
        plugins={[
            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)