Docs
Plugins
Localizations
Examples
Updates
Purchase

Customize the zoom levels

In addition to the special zoom levels such as Actual size, Page fit, Page width, the `Zoom` component provides more levels which are 50%, 75%, 100%, 125%, 150%, 200%, 300%, 400%.
Starting from v2.10.1, you are free to customize these levels by using the new `levels` option. It is an array of numbers.
import { zoomPlugin } from '@react-pdf-viewer/zoom';


// Create the zoom plugin instance
const zoomPluginInstance = zoomPlugin();


const { Zoom } = zoomPluginInstance;


<Zoom levels={[0.4, 0.8, 1.2, 1.6, 2.4, 3.2]} />;
(The sample code)
If you want to see the same changes in the default layout, it is recommended to take a look at this example first.
Once you understand how the default toolbar can be customized, then it is quite easy to apply the similar changes:
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import type { ToolbarProps, ToolbarSlot, TransformToolbarSlot } from '@react-pdf-viewer/toolbar';


const defaultLayoutPluginInstance = defaultLayoutPlugin({
    renderToolbar: (Toolbar: (props: ToolbarProps) => React.ReactElement) => (
        <Toolbar>{renderDefaultToolbar(transform)}</Toolbar>
    ),
});


const { renderDefaultToolbar } = defaultLayoutPluginInstance.toolbarPluginInstance;


// Transform the default toolbar to the new one
const transform: TransformToolbarSlot = (slot: ToolbarSlot) => {
    const { Zoom } = slot;


    // Change the `Zoom` slot in the default toolbar
    // The other slots are kept unchanged
    return Object.assign({}, slot, {
        Zoom: () => <Zoom levels={[0.4, 0.8, 1.2, 1.6, 2.4, 3.2]} />,
    });
};
(The sample code)

See also