Customize the width of thumbnails

As we know, the thumbnail plugin provides the `Thumbnails` component to preview pages as thumbnails. All the thumbnails have the same width of `100px`. If you want to have smaller or bigger thumbnails, you can use the `thumbnailWidth` option which is available from 3.3.1.

The following sample code increases the width of thumbnails from `100px` to `150px`:

import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail';

const thumbnailPluginInstance = thumbnailPlugin({
    thumbnailWidth: 150,
});
const { Thumbnails } = thumbnailPluginInstance;

(The sample code)

The option can be used with the default layout as well:

import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    thumbnailPlugin: {
        thumbnailWidth: 150,
    },
});

(The sample code)

Customize the width of thumbnails

See also