useMouse

Hook that manages a mouse position

sensors

test coverage

Last changed: 15 days ago

Installation

Library

CLI

Manual

import { useMouse } from '@siberiacancode/reactuse';

Usage

const { x, y, clientX, clientY, elementX, elementY, elementPositionX, elementPositionY } = useMouse(ref);
// or
const { ref, x, y, clientX, clientY, elementX, elementY, elementPositionX, elementPositionY } = useMouse();

Demo

source

Api

Parameters

Name	Type	Default	Note
target?	HookTarget	window	The target element to manage the mouse position for

Returns

UseMouseReturn

Returns

UseMouseReturn & { ref: StateRef<Target> }

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseMouseReturn {
  /** The current mouse client x position */
  clientX: number;
  /** The current mouse client y position */
  clientY: number;
  /** The current element position x */
  elementPositionX: number;
  /** The current element position y */
  elementPositionY: number;
  /** The current element x position */
  elementX: number;
  /** The current element y position */
  elementY: number;
  /** The current mouse x position */
  x: number;
  /** The current mouse y position */
  y: number;
}

export interface UseMouse {
  (target: HookTarget): UseMouseReturn;

  <Target extends Element>(
    target?: never
  ): UseMouseReturn & {
    ref: StateRef<Target>;
  };

  (target?: Window): UseMouseReturn;
}

Source

Source • Demo

Contributors

D

debabin

H

hywax