Scroll Mode plugin

The `scroll-mode` plugin provides buttons to adjust the scroll mode to one of three 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.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
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
`HorizontalScrollingIcon``ReactElement`The icon represents the horizontal scroll mode2.0.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.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