Example: Zoom to a specific level

The zoom in and zoom out buttons described in the Customize the zoom buttons example only increases or descreases the scale level in a pre-defined array of levels. They do not provide the ability of zooming to given level which is not in that array.

The Zoom component comes in handy:

import { zoomPlugin } from '@react-pdf-viewer/zoom';

const zoomPluginInstance = zoomPlugin();
const { Zoom } = zoomPluginInstance;

It has a render prop that accepts a RenderZoomProps and returns a React element.

RenderZoomProps provides the following properties:

onZoom is a function that takes a number | SpecialZoomLevel parameter.

SpecialZoomLevel is an enum of three possible values:

The sample code below creates two buttons that zoom the current document up to 200% and actual size of page:

import { SpecialZoomLevel } from '@react-pdf-viewer/core';
import { RenderZoomProps } from '@react-pdf-viewer/zoom';

// Your render function
<Zoom>
{
    (props: RenderZoomProps) => (
        <button
            style={{
                ...
            }}
            onClick={() => props.onZoom(2.0)}
        >
            150%
        </button>
    )
}
</Zoom>
<Zoom>
{
    (props: RenderZoomProps) => (
        <button
            style={{
                ...
            }}
            onClick={() => props.onZoom(SpecialZoomLevel.ActualSize)}
        >
            Actual size
        </button>
    )
}
</Zoom>

(The sample code)

Related examples

• Customize the zoom buttons
• Use the default zoom buttons
• Zoom to a specific level programmatically