useZoom

Demo

Use the wheel to zoom onto the datasaurus.

Usage

import { useRef } from "react";
import { Center } from "../Center";
import { TransformTester } from "../TransformTester";
import { Brushable } from "../Brushable";
import { useZoom } from "hyprvis";

export function ZoomUsage () {
    const interactionRef = useRef();
    const { value } = useZoom(interactionRef);

    return <Center>
        <Brushable ref={interactionRef}>
            <TransformTester zoom={value} />
        </Brushable>
    </Center>
}

API

value

value?: ZoomTransform

Optional value that can be used to control the useZoom hook in conjunction with onChange.

onChange

onChange?: (value: ZoomTransform) => void

Event that is fired whenever the zoom changes. This is useful for controlling the state of this hook.

direction

direction?: 'x' | 'y' | 'xy'

Restricts the orientation of the zoom to the given axis. Useful when zooming on scales for instance.

constraint

constraint?: (transform: ZoomTransform) => ZoomTransform

The constraint that is applied on the transform. The default constraint will force it to be withing the extent (width, height).