Docs
Plugins
Localizations
Examples
Updates
Purchase

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
    className="rpv-core__viewer"
    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)

See also