Example: Preview pages as thumbnails

This example demonstrates how we can preview pages of a PDF document as thumbnails by using the Thumbnail plugin.

In the following sample code, the thumbnails are listed on the left side. The right side displays the current PDF document.

import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail';

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

const thumbnailPluginInstance = thumbnailPlugin();
const { Thumbnails } = thumbnailPluginInstance;

// Render
<div
    style={{
        border: '1px solid rgba(0, 0, 0, 0.3)',
        display: 'flex',
        height: '100%',
    }}
>
    <div
        style={{
            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
            overflow: 'auto',
            width: '30%',
        }}
    >
        <Thumbnails />
    </div>
    <div style={{ flex: 1 }}>
        <Viewer
            fileUrl='/assets/pdf-open-parameters.pdf'
            plugins={[
                thumbnailPluginInstance,
            ]}
        />
    </div>
</div>

The thumbnails are lazy loaded. It means that if a thumbnail is not visible in its container, it will not be loaded.

Click a particular thumbnail to jump to associate page (The sample code)