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.