useZoom

The useZoom hook is used to control the zoom level of the interactive design area. It returns 3 functions and one variable.

Two of the functions are zoomIn and zoomOut, which update the zoom level while keeping the center of the viewport consistent. It also returns the function setZoomMultiplier, which can be used to change the amount by which the zoom changes when calling zoomIn and zoomOut. The default zoomMultiplier is 1.1. Lastly, it returns the current zoomPercentage, which is computed based on the current zoom factor and the initial zoom factor. The initial zoom factor is set when focusing a design area.

Note that this hook must be used within a MobX observer Higher Order Component.

const ZoomControls = observer(() => {
    const { zoomIn, zoomOut, zoomPercentage } = useZoom();

    return (
        <div>
            <div>
                <button onClick={() => zoomIn()}>Zoom In</button>
                <button onClick={() => zoomOut()}>Zoom Out</button>
            </div>
            <div>Zoom Percentage: {zoomPercentage}</div>
        </div>
    );
});