Example: Customize the buttons to switch the scroll mode

The SwitchScrollMode component provided by the Scroll Mode plugin is used to create a custom switching button. It has two properties:

*: Required parameter

PropertyTypeDescriptionFrom
childrenRenderSwitchScrollModeProps => ReactElementThe render prop2.0.0
mode*ScrollModeThe scroll mode2.0.0

The sample code below creates a button that clicking it will switch to the horizontal scroll mode:

import { RenderSwitchScrollModeProps, ScrollMode } from '@react-pdf-viewer/scroll-mode';

// Your render function
const scrollModePluginInstance = scrollModePlugin();
const { SwitchScrollMode } = scrollModePluginInstance;

<SwitchScrollMode mode={ScrollMode.Horizontal}>
{
    (props: RenderSwitchScrollModeProps) => (
        <button
            style={{
                // Update the styles if the current mode is active
                backgroundColor: props.isSelected ? '#357edd' : 'transparent',
                borderColor: props.isSelected ? 'transparent' : '#357edd',
                color: props.isSelected ? '#fff' : '#000',
                
                borderRadius: '4px',
                borderStyle: 'solid',
                borderWidth: '1px',
                cursor: 'pointer',
                padding: '8px',
            }}
            onClick={props.onClick}
        >
            Horizontal scrolling
        </button>
    )
}
</SwitchScrollMode>

(The sample code)

0%

Related example