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';
The scroll-mode plugin is included in the toolbar and default-layout plugins

Usage

1. 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';
2. Create the plugin instance
const scrollModePluginInstance = scrollModePlugin(
props?: ScrollModePluginProps
);
The optional parameter ScrollModePluginProps represents an object of the property:
(? denotes an optional property)
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
3. Register the plugin
Register the scroll-mode plugin instance:
<Viewer 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

See also

Changelog

v2.0.0
  • First release