Selection Mode plugin

The selection-mode plugin provides buttons to apply two different selection modes:
SelectionMode.HandSelectionModeUse the mouse to drag the pages. Users cannot select the text of document.
SelectionMode.TextSelectionModeThe normal selection mode. Users can select the text of document.
SelectionMode is an enum provided by the selection-mode plugin. You will know more about it in the next section.


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


1. Import the plugin and styles
import { selectionModePlugin } from '@react-pdf-viewer/selection-mode';
// Import styles
import '@react-pdf-viewer/selection-mode/lib/styles/index.css';
2. Create the plugin instance
const selectionModePluginInstance = selectionModePlugin(
props?: SelectionModePluginProps
The optional parameter SelectionModePluginProps represents an object of the property:
(? denotes an optional property)
selectionMode?SelectionModeThe initial selection mode. By default, it is set to SelectionMode.Text2.0.0
The plugin instance selectionModePluginInstance provides the following properties:
SwitchSelectionModeReactElementCustomizable button to switch the selection mode2.0.0
SwitchSelectionModeButtonReactElementThe default button to switch the selection mode2.0.0
SwitchSelectionModeMenuItemReactElementThe default menu item to switch the selection mode2.0.0
3. Register the plugin
Register the selection-mode plugin instance:
<Viewer plugins={[selectionModePluginInstance]} />


The selection-mode plugin provides other useful properties as following:
import { HandToolIcon, TextSelectionIcon } from '@react-pdf-viewer/selection-mode';
HandToolIconReactElementThe hand icon represents the hand selection mode2.0.0
TextSelectionIconReactElementThe icon represents the text selection mode2.0.0

See also


  • First release