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:
PropertyTypeDescriptionFrom
scalenumberThe current scale level2.0.0
onZoomFunctionZoom to specific level2.0.0
onZoom is a function that takes a number | SpecialZoomLevel parameter.
SpecialZoomLevel is an enum of three possible values:
ValueDescription
ActualSizeZoom to actual size of page
PageFitFit the pages in the container
PageWidthFit 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>

See also