Skip to main content

useMouse

React sensor hooks that track cursor positio

Usage​

Live Editor

function Demo() {
  const mouse = useMouse();

  return (
    <div>
      <p>
        Client - x: {mouse.clientX}, y: {mouse.clientY}
      </p>
      <p>
        Page - x: {mouse.pageX}, y: {mouse.pageY}
      </p>
      <p>
        Screen - x: {mouse.screenX}, y: {mouse.screenY}
      </p>
    </div>
  );
};
Result
Loading...

API​

useMouse​

Returns​

UseMouseCursorState: Mouse Position

Arguments​

ArgumentDescriptionTypeDefaultValue
targetdom elementBasicTarget-

UseMouseCursorState​

Type​

export interface UseMouseCursorState { screenX: number; screenY: number; clientX: number; clientY: number; pageX: number; pageY: number; elementX: number; elementY: number; elementH: number; elementW: number; elementPosX: number; elementPosY: number; }

BasicTarget​

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue​

type TargetValue<T> = T | undefined | null;

TargetType​

type TargetType = HTMLElement | Element | Window | Document | EventTarget;