Thumbnail plugin

The thumbnail plugin previews document pages as thumbnails. Clicking a particular thumbnail will jump to associate page.

Install

npm install '@react-pdf-viewer/thumbnail';

Usage

  • Import the plugin and styles:
import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail';

// Import styles
import '@react-pdf-viewer/thumbnail/lib/styles/index.css';
  • Create the plugin instance:
const thumbnailPluginInstance = thumbnailPlugin();

The plugin instance thumbnailPluginInstance provides the following property:

PropertyTypeDescriptionFrom
ThumbnailsReactElementThe component previews all thumbnails2.0.0
  • Finally, register the thumbnail plugin instance, and use the <Thumbnails /> component to display all thumbnails.
<Viewer
    fileUrl='...'
    plugins={[
        thumbnailPluginInstance,
    ]}
/>

Example