Scroll Mode plugin

The scroll-mode plugin provides buttons to adjust the scroll mode to one of three possible modes:

ModeTypeDescription
ScrollMode.VerticalScrollModeThe default scroll mode. Scroll the pages in the vertical direction
ScrollMode.HorizontalScrollModeScroll the pages in the horizontal direction
ScrollMode.WrappedScrollModeScroll the pages in both vertical and horizontal directions

ScrollMode is an enum provided by the scroll-mode plugin. You will know more about it in the next section.

Install

npm install '@react-pdf-viewer/scroll-mode';

Usage

  • Import the plugin and styles:
import { scrollModePlugin } from '@react-pdf-viewer/scroll-mode';

// Import styles
import '@react-pdf-viewer/scroll-mode/lib/styles/index.css';
  • Create the plugin instance:
const scrollModePluginInstance = scrollModePlugin(
    props?: ScrollModePluginProps
);

The optional parameter ScrollModePluginProps represents an object of the property:

?: Optional

PropertyTypeDescriptionFrom
scrollMode?ScrollModeThe initial scroll mode. By default, it is set to ScrollMode.Vertical2.0.0

The plugin instance scrollModePluginInstance provides the following properties:

PropertyTypeDescriptionFrom
SwitchScrollModeReactElementCustomizable button to switch the scroll mode2.0.0
SwitchScrollModeButtonReactElementThe default button to switch the scroll mode2.0.0
SwitchScrollModeMenuItemReactElementThe default menu item to switch the scroll mode2.0.0
  • Finally, register the scroll-mode plugin instance:
import { Viewer } from '@react-pdf-viewer/core';

// Your render function
<Viewer
    fileUrl='...'
    plugins={[
        scrollModePluginInstance,
    ]}
/>

Properties

The scroll-mode plugin provides other useful properties as following:

import {
    HorizontalScrollingIcon, VerticalScrollingIcon, WrappedScrollingIcon
} from '@react-pdf-viewer/scroll-mode';
PropertyTypeDescriptionFrom
HorizontalScrollingIconReactElementThe icon represents the horizontal scroll mode2.0.0
VerticalScrollingIconReactElementThe icon represents the vertical scroll mode2.0.0
WrappedScrollingIconReactElementThe icon represents the wrapped scroll mode2.0.0

Examples