Magazine layout

In this example, we will learn how to display a PDF document in a magazine layout. The layout consists of the main following parts:

The main viewer
The list of thumbnails is displayed horizontally at the bottom
The buttons to jump to the previous and next pages

Display thumbnails horizontally

To preview pages as thumbnails, we can use the `Thumbnails` component provided by the thumbnail plugin.

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

const thumbnailPluginInstance = thumbnailPlugin();
const { Thumbnails } = thumbnailPluginInstance;

By default, the thumbnails are displayed in the vertical direction. In order to change the direction, we can use the `thumbnailDirection` property:

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

<Thumbnails thumbnailDirection={ThumbnailDirection.Horizontal} />;

The `ThumbnailDirection` type has two possible values:

`ThumbnailDirection.Horizontal`: Display thumbnails horizontally
`ThumbnailDirection.Vertical`: Display thumbnails vertically

Navigate to the previous and next pages

One of the important functionalities is to let users navigate to the previous and next pages. The page navigation plugin exposes the functions for the same purpose:

import { pageNavigationPlugin } from '@react-pdf-viewer/page-navigation';

const pageNavigationPluginInstance = pageNavigationPlugin();
const { jumpToNextPage, jumpToPreviousPage } = pageNavigationPluginInstance;

It becomes easy to integrate those functions with your buttons. The snippet below uses the `MinimalButton` component and built-in icons, but it's completely up to you to use a native HTML button or your custom component:

import { MinimalButton } from '@react-pdf-viewer/core';
import { NextIcon, PreviousIcon } from '@react-pdf-viewer/page-navigation';

// Jump to the previous page
<MinimalButton onClick={jumpToPreviousPage}>
    <PreviousIcon />
</MinimalButton>

// Jump to the next page
<MinimalButton onClick={jumpToNextPage}>
    <NextIcon />
</MinimalButton>

Last but not least, you probably would like to display the buttons at the center of the left and right sides. To do that, we can place them in absolute containers:

<div
    style={{
        position: 'relative',
    }}
>
    {/* The left button */}
    <div
        style={{
            position: 'absolute',
            top: '50%',
            left: '1rem',
            transform: 'translate(0, -100%) rotate(-90deg)',
            zIndex: '1',
        }}
    >
        ...
    </div>

    {/* The right button */}
    <div
        style={{
            position: 'absolute',
            top: '50%',
            right: '1rem',
            transform: 'translate(0, -100%) rotate(-90deg)',
            zIndex: '1',
        }}
    >
        ...
    </div>
</div>

The document used in the example belongs to this site

(The sample code)

Magazine layout

Display thumbnails horizontally

Navigate to the previous and next pages

See also