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>