ZoomControls

The zoom group of a dock: zoom out, the percentage with a menu of presets, zoom in, and fit everything.

import { ZOOM_PRESETS, ZoomControls } from '@basmilius/react-ui';

import { useState } from 'react';
import { ZoomControls, shortcut } from '@basmilius/react-ui';

const SHORTCUTS = { zoomReset: shortcut('Mod+0'), fitAll: shortcut('Mod+1') };

export default function ZoomControlsDemo() {
    const [zoom, setZoom] = useState(1);

    return (
        <ZoomControls
            zoom={zoom}
            onZoomChange={(next) => setZoom(Math.min(4, Math.max(0.1, next)))}
            onFitAll={() => setZoom(0.75)}
            shortcuts={SHORTCUTS}
            selection={{ label: 'Zoom to selection', enabled: false, onZoom: () => {} }}
        />
    );
}

The buttons step 10 percent at a time on the rounded percentage the readout shows, so plus and minus come back where they started. The readout opens a menu of presets that ticks the current one, and a row that fits everything. You keep the zoom and clamp it; 1 is 100%.

selection adds a menu row for zooming to what is selected. Leave it out on a surface with nothing to select. When nothing is selected, set enabled: false. The row stays and says it cannot act, rather than doing nothing.

ZOOM_PRESETS is the default list, [25, 50, 75, 100, 150, 200]. The words come from the library in English or Dutch; labels replaces any of them with your own.

Props

Prop	Type	Default
zoom	number		Required.
onZoomChange	(zoom: number) => void		Required.
onFitAll	() => void		Required.
presets	readonly number[]	ZOOM_PRESETS	Percentages.
labels	ZoomLabels		{ out?, in?, presets?, fit?, fitEverything? }
shortcuts	{ zoomReset?: Shortcut; fitAll?: Shortcut }		Printed beside 100% and fit, and in the fit button's tooltip.
selection	ZoomSelection		{ label, enabled, onZoom, shortcut? }
className	string
ref	Ref<HTMLDivElement>

The shortcuts are only printed. Bind the keys on the window yourself. ZoomControlsProps, ZoomLabels and ZoomSelection are exported types.