Example: Customize the buttons to switch the selection mode
The SwitchSelectionMode
component provided by the Selection Mode plugin is used to create a custom switching button. It has two properties:
*: Required parameter
Property | Type | Description | From |
children | RenderSwitchSelectionModeProps => ReactElement | The render prop | 2.0.0 |
mode * | SelectionMode | The selection mode | 2.0.0 |
The sample code below creates a button that clicking it will switch to the hand selection mode:
import { RenderSwitchSelectionModeProps, SelectionMode } from '@react-pdf-viewer/selection-mode';
// Your render function
const selectionModePluginInstance = selectionModePlugin();
const { SwitchSelectionMode } = selectionModePluginInstance;
<SwitchSelectionMode mode={SelectionMode.Hand}>
{
(props: RenderSwitchSelectionModeProps) => (
<button
style={{
backgroundColor: '#357edd',
border: 'none',
borderRadius: '4px',
color: '#ffffff',
cursor: 'pointer',
padding: '8px',
}}
onClick={props.onClick}
>
Hand tool
</button>
)
}
</SwitchSelectionMode>