import { zoomPlugin } from '@react-pdf-viewer/zoom';
const zoomPluginInstance = zoomPlugin();
const { Zoom } = zoomPluginInstance;
<Zoom levels={[0.4, 0.8, 1.2, 1.6, 2.4, 3.2]} />;
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;
const transform: TransformToolbarSlot = (slot: ToolbarSlot) => {
const { Zoom } = slot;
return Object.assign({}, slot, {
Zoom: () => <Zoom levels={[0.4, 0.8, 1.2, 1.6, 2.4, 3.2]} />,
});
};