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:

Property	Type	Description	From
`scale`	`number`	The current scale level	2.0.0
`onZoom`	`Function`	Zoom to specific level	2.0.0

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

SpecialZoomLevel is an enum of three possible values:

Value	Description
`ActualSize`	Zoom to actual size of page
`PageFit`	Fit the pages in the container
`PageWidth`	Fit the width of pages in the container

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)

Example: Zoom to a specific level

Related examples