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>;

(The sample code)

Customize the zoom buttons

Customize the zoom out button

Customize the zoom in button

Display the current scale level

See also