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>

(The sample code)

Related example

• Use the default buttons to switch the selection mode