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,
...
]}
/>

See also