`thumbnail` plugin previews document pages as thumbnails. Clicking a particular thumbnail will jump to associate page.npm install '@react-pdf-viewer/thumbnail';
`thumbnail` plugin is included in the default-layout pluginimport { thumbnailPlugin } from '@react-pdf-viewer/thumbnail';// Import stylesimport '@react-pdf-viewer/thumbnail/lib/styles/index.css';
const thumbnailPluginInstance = thumbnailPlugin(props?: ThumbnailPluginProps);
`thumbnailPlugin()` function takes a `ThumbnailPluginProps` parameter that consists of the following property:| Property | Type | Description | From |
|---|---|---|---|
`renderCurrentPageLabel`? | `RenderCurrentPageLabelProps => ReactElement` | Render custom page label for each thumbnail. See this example | 2.10.0 |
`renderSpinner`? | `() => React.ReactElement` | Custom loading indicator that replaces the default `Spinner`. See this example | 3.0.0 |
`thumbnailWidth`? | `number` | The width of thumbnails. See this example | 3.3.1 |
`thumbnailPluginInstance` provides the following property:| Property | Type | Description | From |
|---|---|---|---|
`Cover` | `ReactElement` | Shows the thumbnail of a particular page. See this example | 2.9.0 |
`Thumbnails` | `ReactElement` | Previews all thumbnails | 2.0.0 |
`thumbnail` plugin instance, and use the `<Thumbnails />` component to display all thumbnails.const { Thumbnails } = thumbnailPluginInstance;<Viewer plugins={[thumbnailPluginInstance]} />;
`Cover` component adds new `width` property`Thumbnails` component provides new property to display the thumbnails in the given direction`Cover` component doesn't rotate the corresponding rotated page`thumbnailWidth` option`renderThumbnailItem` property of the `Thumbnails` component adds new `onRotatePage` function to rotate a particular thumbnail`renderSpinner` property that can be used to replace the default `Spinner` component`renderThumbnailItem` property that is used to customize the thumbnail renderer`Cover` component uses the image instead of canvas tag`Cover` component position isn't correct`renderCurrentPageLabel` option to support custom page labels`Cover` component`Cover` component that shows the thumbnail of a particular page