Docs
Plugins
Localizations
Examples
Updates
Purchase
Plugins

Scroll Mode plugin

The `scroll-mode` plugin provides buttons to adjust the scroll mode to one of four possible modes:
ModeTypeDescription
`ScrollMode.Vertical``ScrollMode`The default scroll mode. Scroll the pages in the vertical direction
`ScrollMode.Horizontal``ScrollMode`Scroll the pages in the horizontal direction
`ScrollMode.Page``ScrollMode`Display a single page each time
`ScrollMode.Wrapped``ScrollMode`Scroll the pages in both vertical and horizontal directions
`ScrollMode` is an enum provided by the `@react-pdf-viewer/core` package.

Install

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

Usage

1. Create the plugin instance
const scrollModePluginInstance = scrollModePlugin();
The plugin instance `scrollModePluginInstance` provides the following properties:
PropertyTypeDescriptionFrom
`switchScrollMode``Function`Switch to a given scroll mode2.11.0
`SwitchScrollMode``ReactElement`Customizable button to switch the scroll mode2.0.0
`SwitchScrollModeButton``ReactElement`The default button to switch the scroll mode2.0.0
`SwitchScrollModeMenuItem``ReactElement`The default menu item to switch the scroll mode2.0.0
`switchViewMode``Function`Switch to a given viewmode3.10.0
`SwitchViewMode``ReactElement`Customizable button to switch the viewmode3.10.0
`SwitchViewModeButton``ReactElement`The default button to switch the viewmode3.10.0
`SwitchViewModeMenuItem``ReactElement`The default menu item to switch the viewmode3.10.0
The `switchScrollMode` function can be used to switch the current layout to a given mode programmatically:
import { ScrollMode } from '@react-pdf-viewer/core';


// Switch to the wrapped mode
switchScrollMode(ScrollMode.Wrapped);
2. 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
`DualPageCoverViewModeIcon``ReactElement`The icon represents the dual page with cover viewmode3.10.0
`DualPageViewModeIcon``ReactElement`The icon represents the dual page viewmode3.10.0
`HorizontalScrollingIcon``ReactElement`The icon represents the horizontal scroll mode2.0.0
`PageScrollingIcon``ReactElement`The icon represents the page scroll mode3.10.0
`VerticalScrollingIcon``ReactElement`The icon represents the vertical scroll mode2.0.0
`WrappedScrollingIcon``ReactElement`The icon represents the wrapped scroll mode2.0.0

See also

Changelog

v3.10.0
  • Add `switchViewMode` method
  • Add new `DualPageCoverViewModeIcon`, `DualPageViewModeIcon` and `PageScrollingIcon` icons
v3.1.0
  • The `ScrollMode` provided by the `@react-pdf-viewer/scroll-mode` package now belongs to the `@react-pdf-viewer/core` package:
// v3.0.0 and previous versions
import { ScrollMode } from '@react-pdf-viewer/scroll-mode';


// From v3.1.0
import { ScrollMode } from '@react-pdf-viewer/core';
  • The inital scroll mode option provided by the `scrollModePlugin` plugin now belongs to the `Viewer` component:
// v3.0.0 and previous versions
import { scrollModePlugin, ScrollMode } from '@react-pdf-viewer/scroll-mode';


const scrollModePluginInstance = scrollModePlugin({
    scrollMode: ScrollMode.Horizontal,
});


// From v3.1.0
import { ScrollMode } from '@react-pdf-viewer/core';


<Viewer scrollMode={ScrollMode.Horizontal} />;
  • There aren't CSS styles provided by the `@react-pdf-viewer/scroll-mode` package:
// v3.0.0 and previous versions
import '@react-pdf-viewer/scroll-mode/lib/styles/index.css';


// From v3.1.0
// Remove the import above
v2.11.0
  • Add `switchScrollMode` method
v2.0.0
  • First release
RotateSearch