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,
}}
>
{}
</div>
<div
style={{
position: 'absolute',
right: 0,
top: '50%',
transform: 'translate(-24px, -50%)',
zIndex: 1,
}}
>
{}
</div>
{}
...
</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>;
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, {
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