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/core';
// Your render function
const scrollModePluginInstance = scrollModePlugin();
const { SwitchScrollModeButton } = scrollModePluginInstance;
return (
<div
className="rpv-core__viewer"
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]}
scrollMode={ScrollMode.Horizontal}
/>
</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.
0%

See also