Thumbnail plugin

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


npm install '@react-pdf-viewer/thumbnail';
The `thumbnail` plugin is included in the default-layout plugin


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(props?: ThumbnailPluginProps);
The `thumbnailPlugin()` function takes a `ThumbnailPluginProps` parameter that consists of the following property:
(? denotes an optional property)
`renderCurrentPageLabel`?`RenderCurrentPageLabelProps => ReactElement`Render custom page label for each thumbnail. See this example2.10.0
`renderSpinner`?`() => React.ReactElement`Custom loading indicator that replaces the default `Spinner`. See this example3.0.0
The plugin instance `thumbnailPluginInstance` provides the following property:
`Cover``ReactElement`Shows the thumbnail of a particular page. See this example2.9.0
`Thumbnails``ReactElement`Previews 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


  • Add new `renderSpinner` property that can be used to replace the default `Spinner` component
  • Add new `renderThumbnailItem` property that is used to customize the thumbnail renderer
  • The `Cover` component uses the image instead of canvas tag
  • The `Cover` component position isn't correct
  • The thumbnails are stuck at loading spinner
  • Add new `renderCurrentPageLabel` option to support custom page labels
  • Fix the TypeScript definition of the `Cover` component
  • Add new `Cover` component that shows the thumbnail of a particular page
  • Show the page numbers for thumbnails
  • There are big spaces between thumbnails
  • Automatically scroll to the thumbnail that represents the current page
  • First release