Example: Use the default zoom buttons

This example demonstrates how we can the default zoom buttons provided by the Zoom plugin.

It uses the default buttons for zooming out (<ZoomOutButton />), zooming in (<ZoomInButton />) and zooming to pre-defined levels (<ZoomPopover />).

import { zoomPlugin } from '@react-pdf-viewer/zoom';
import '@react-pdf-viewer/zoom/lib/styles/index.css';

const zoomPluginInstance = zoomPlugin();
const { ZoomInButton, ZoomOutButton, ZoomPopover } = zoomPluginInstance;

// Render
<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',
            justifyContent: 'center',
            padding: '4px',
        }}
    >
        <ZoomOutButton />
        <ZoomPopover />
        <ZoomInButton />
    </div>
    <div
        style={{
            flex: 1,
            overflow: 'hidden',
        }}
    >
        <Viewer
            fileUrl='/assets/pdf-open-parameters.pdf'
            plugins={[
                zoomPluginInstance,
            ]}
        />
    </div>
</div>

(The sample code)

0%

Related examples