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';
The thumbnail plugin is included in the default-layout plugin

Usage

1. Import the plugin and styles
import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail';
// Import styles
import '@react-pdf-viewer/thumbnail/lib/styles/index.css';
2. Create the plugin instance
const thumbnailPluginInstance = thumbnailPlugin();
The plugin instance thumbnailPluginInstance provides the following property:
PropertyTypeDescriptionFrom
CoverReactElementShows the thumbnail of a particular page2.9.0
ThumbnailsReactElementPreviews all thumbnails2.0.0
3. Register the plugin
Register the thumbnail plugin instance, and use the <Thumbnails /> component to display all thumbnails.
const { Thumbnails } = thumbnailPluginInstance;
<Viewer plugins={[thumbnailPluginInstance]} />;

See also

Changelog

v2.9.0
  • Add new Cover component that shows the thumbnail of a particular page
  • Show the page numbers for thumbnails
v2.5.0
  • There are big spaces between thumbnails
v2.4.3
  • Automatically scroll to the thumbnail that represents the current page
v2.0.0
  • First release