Skip to main content

useMousePosition()

The useMousePosition() hook lets you track the mouse position when hovering over a specific container or the entire page, so if a target container is not provided through the ref, it will track the mouse position relative to the entire document.

Import​

import { useMousePosition } from 'react-haiku';

Usage​

Targeted Container​

Hover This Container

X: 0 | Y: 0

import { useMousePosition } from 'react-haiku';

export const Component = () => {
    const { target, x, y } = useMousePosition();

    return (
        <div ref={target}>
            <b>Hover This Container</b>
            <p>{`X: ${x} | Y: ${y}`}</p>
        </div>
    );
}

Entire Document​

X: 0 | Y: 0

import { useMousePosition } from 'react-haiku';

export const Component = () => {
    const { x, y } = useMousePosition();

    return (
        <div>
            <p>{`X: ${x} | Y: ${y}`}</p>
        </div>
    );
}