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';

Usage

  • 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';
  • Create the plugin instance:
const selectionModePluginInstance = selectionModePlugin(
    props?: SelectionModePluginProps
);

The optional parameter SelectionModePluginProps represents an object of the property:

?: Optional

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
  • Finally, register the selection-mode plugin instance:
import { Viewer } from '@react-pdf-viewer/core';

// Your render function
<Viewer
    fileUrl='...'
    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

Examples