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
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',
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>;

See also