Scroll Mode plugin

The scroll-mode plugin provides buttons to adjust the scroll mode to one of three possible modes:
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.


npm install '@react-pdf-viewer/scroll-mode';
The scroll-mode plugin is included in the toolbar and default-layout plugins


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)
scrollMode?ScrollModeThe initial scroll mode. By default, it is set to ScrollMode.Vertical2.0.0
The plugin instance scrollModePluginInstance provides the following properties:
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]} />


The scroll-mode plugin provides other useful properties as following:
import { HorizontalScrollingIcon, VerticalScrollingIcon, WrappedScrollingIcon } from '@react-pdf-viewer/scroll-mode';
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


  • First release