Selection Mode plugin
The `selection-mode` plugin provides buttons to apply two different selection modes:
| Mode | Type | Description |
|---|
`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.
Install
npm install '@react-pdf-viewer/selection-mode';
Usage
1. Import the plugin and styles
import { selectionModePlugin } from '@react-pdf-viewer/selection-mode';
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)
| Property | Type | Description | From |
|---|
`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:
| Property | Type | Description | From |
|---|
`SwitchSelectionMode` | `ReactElement` | Customizable button to switch the selection mode | 2.0.0 |
`SwitchSelectionModeButton` | `ReactElement` | The default button to switch the selection mode | 2.0.0 |
`SwitchSelectionModeMenuItem` | `ReactElement` | The default menu item to switch the selection mode | 2.0.0 |
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';
| Property | Type | Description | From |
|---|
`HandToolIcon` | `ReactElement` | The hand icon represents the hand selection mode | 2.0.0 |
`TextSelectionIcon` | `ReactElement` | The icon represents the text selection mode | 2.0.0 |
See also
Changelog