Selection Mode plugin

The selection-mode plugin provides buttons to apply two different selection modes:
ModeTypeDescription
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.

Install

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

Usage

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)
PropertyTypeDescriptionFrom
selectionMode?SelectionModeThe initial selection mode. By default, it is set to SelectionMode.Text2.0.0
The plugin instance selectionModePluginInstance provides the following properties:
PropertyTypeDescriptionFrom
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]} />

Properties

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

See also

Changelog

v2.0.0
  • First release