Example: Customize the zoom buttons
We can create custom zoom buttons with the ZoomOut
, CurrentScale
and ZoomIn
components.
They can be accessed directly from the Zoom plugin instance:
import { zoomPlugin } from '@react-pdf-viewer/zoom';
const zoomPluginInstance = zoomPlugin();
const { CurrentScale, ZoomIn, ZoomOut } = zoomPluginInstance;
Customize the zoom out button
The ZoomOut
component has a render prop which is a function accepting RenderZoomOutProps
parameter and returns a React element.
import { RenderZoomOutProps } from '@react-pdf-viewer/zoom';
// Your render function
<ZoomOut>
{
(props: RenderZoomOutProps) => (
<button
style={{
...
}}
onClick={props.onClick}
>
Print
</button>
)
}
</ZoomOut>
Customize the zoom in button
The ZoomIn
component has a render prop that takes a RenderZoomInProps
parameter and returns a React element.
import { RenderZoomInProps } from '@react-pdf-viewer/zoom';
// Your render function
<ZoomIn>
{
(props: RenderZoomInProps) => (
<button
style={{
...
}}
onClick={props.onClick}
>
Print
</button>
)
}
</ZoomIn>
Display the current scale level
The CurrentScale
component has a render prop that takes a RenderCurrentScaleProps
parameter and returns a React element.
import { RenderCurrentScaleProps } from '@react-pdf-viewer/zoom';
// Your render function
<CurrentScale>
{
(props: RenderCurrentScaleProps) => <>{`${Math.round(props.scale * 100)}%`}</>
}
</CurrentScale>
0%