Selection Mode plugin

The `selection-mode` plugin provides buttons to apply two different selection modes:
`SelectionMode.Hand``SelectionMode`Use the mouse to drag the pages. Users cannot select the text of document.
`SelectionMode.Text``SelectionMode`The 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`?`SelectionMode`The initial selection mode. By default, it is set to `SelectionMode.Text`2.0.0
The plugin instance `selectionModePluginInstance` provides the following properties:
`SwitchSelectionMode``ReactElement`Customizable button to switch the selection mode2.0.0
`SwitchSelectionModeButton``ReactElement`The default button to switch the selection mode2.0.0
`SwitchSelectionModeMenuItem``ReactElement`The 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';
`HandToolIcon``ReactElement`The hand icon represents the hand selection mode2.0.0
`TextSelectionIcon``ReactElement`The icon represents the text selection mode2.0.0

See also


  • First release