usePan

Demo

Use the mouse to move the datasaurus.

Usage

export function PanUsage () {
    const interactionRef = useRef();
    const { zoom } = usePan(interactionRef, {});

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

API

value

value?: ZoomTransform

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

onChange

onChange?: (value: ZoomTransform) => void

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

direction

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

Restricts the orientation of the pan 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).