Slide presentation

In this example, we will present the pages of a PDF document as slides. It displays only single page each time, and provides the buttons to navigate to the previous and next pages.

Display single page each time

As mentioned in the Single page view example, the document will fit best within the container if we set the initial scale to `SpecialZoomLevel.PageFit`:

import { SpecialZoomLevel } from '@react-pdf-viewer/core';

<Viewer defaultScale={SpecialZoomLevel.PageFit} />;

Navigate to the previous and next pages

We can display the navigation buttons at the left and right side of the main viewer by positioning them absolutely as following:

<div
    style={{
        height: '100%',
        position: 'relative',
    }}
>
    <div
        style={{
            left: 0,
            position: 'absolute',
            top: '50%',
            transform: 'translate(24px, -50%)',
            zIndex: 1,
        }}
    >
        {/* Button to go to the previous page */}
    </div>
    <div
        style={{
            position: 'absolute',
            right: 0,
            top: '50%',
            transform: 'translate(-24px, -50%)',
            zIndex: 1,
        }}
    >
        {/* Button to go to the next page */}
    </div>
    {/* Main viewer */}
    ...
</div>

The Page Navigation plugin provides different components to navigate to particular page such as the first, previous, next and last pages. Specifically, `GoToPreviousPage` and `GoToNextPage` components are useful for customizing the buttons to go to the previous and next pages respectively.

The sample code below shows how we use `Button`, `Icon` and `Tooltip` provided by the `@react-pdf-viewer/core` package to display a custom button:

import { Icon, MinimalButton, Position, Tooltip } from '@react-pdf-viewer/core';
import { pageNavigationPlugin, RenderGoToPageProps } from '@react-pdf-viewer/page-navigation';

const pageNavigationPluginInstance = pageNavigationPlugin();
const { GoToPreviousPage } = pageNavigationPluginInstance;

<GoToPreviousPage>
    {(props: RenderGoToPageProps) => (
        <Tooltip
            position={Position.BottomCenter}
            target={
                <MinimalButton onClick={props.onClick}>
                    <Icon size={16}>
                        <path d="M18.4.5,5.825,11.626a.5.5,0,0,0,0,.748L18.4,23.5" />
                    </Icon>
                </MinimalButton>
            }
            content={() => 'Previous page'}
            offset={{ left: 0, top: 8 }}
        />
    )}
</GoToPreviousPage>;

If you want to know more details, please take a look at the Customize the navigation buttons example.

Disable scrolling

To prevent the pages from scrolling, we need to set the `overflow: hidden` style to the pages container.

To archive that, we can create a plugin that override the styles as following:

import { Plugin, RenderViewer } from '@react-pdf-viewer/core';

const disableScrollPlugin = (): Plugin => {
    const renderViewer = (props: RenderViewer) => {
        const { slot } = props;

        if (slot.subSlot && slot.subSlot.attrs && slot.subSlot.attrs.style) {
            slot.subSlot.attrs.style = Object.assign({}, slot.subSlot.attrs.style, {
                // Disable scrolling in the pages container
                overflow: 'hidden',
            });
        }

        return slot;
    };

    return {
        renderViewer,
    };
};

Don't forget to create a new instance of the plugin, and register it with the main `Viewer` component:

import disableScrollPlugin from './disableScrollPlugin';

const disableScrollPluginInstance = disableScrollPlugin();

<Viewer
    plugins={[
        disableScrollPluginInstance,
        ...
    ]}
/>

(The sample code)

Slide presentation

Display single page each time

Navigate to the previous and next pages

Disable scrolling

See also