Example: Use the default buttons to switch the scroll mode

The SwitchScrollModeButton component provided by the Scroll Mode plugin accepts one prop named mode that represents the scroll mode.

// Switch to the vertical scroll mode
<SwitchScrollModeButton mode={ScrollMode.Vertical} />

// Switch to the horizontal scroll mode
<SwitchScrollModeButton mode={ScrollMode.Horizontal} />

// Switch to the wrapped scroll mode
<SwitchScrollModeButton mode={ScrollMode.Wrapped} />

The following example uses the default button to switch the scroll mode.

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

// Your render function
const scrollModePluginInstance = scrollModePlugin({
    scrollMode: ScrollMode.Horizontal,
});
const { SwitchScrollModeButton } = scrollModePluginInstance;

return (
    <div
        style={{
            border: '1px solid rgba(0, 0, 0, 0.3)',
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
        }}
    >
        <div
            style={{
                alignItems: 'center',
                backgroundColor: '#eeeeee',
                borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
                display: 'flex',
                padding: '4px',
            }}
        >
            <div style={{ padding: '0px 2px' }}>
                <SwitchScrollModeButton mode={ScrollMode.Vertical} />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <SwitchScrollModeButton mode={ScrollMode.Horizontal} />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <SwitchScrollModeButton mode={ScrollMode.Wrapped} />
            </div>
        </div>
        <div
            style={{
                flex: 1,
                overflow: 'hidden',
            }}
        >
            <Viewer
                fileUrl='/assets/pdf-open-parameters.pdf'
                plugins={[
                    scrollModePluginInstance,
                ]}
            />
        </div>
    </div>
);

In the following demo, if you choose the wrapped scroll mode, you should zoom the document out to 60% to see how the pages are wrapped.

(The sample code)

0%

Related example