useMouse

Hook that manages a mouse position

sensors

low

test coverage

Last changed: 4 days ago

Installation

Library

CLI

Manual

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

Usage

const mouse = useMouse(ref);
// or
const mouse = useMouse<HTMLDivElement>();

Demo

source

Api

Parameters

Name	Type	Default	Note
target?	HookTarget	window	The target element to manage the mouse position for
callback?	(value: UseMouseValue, event: Event) => void	-	The callback to invoke on mouse updates

Returns

UseMouseReturn

Parameters

Name	Type	Default	Note
callback?	(value: UseMouseValue, event: Event) => void	-	The callback to invoke on mouse updates

Returns

UseMouseReturn & { ref: StateRef<Target> }

Type declaration

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

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

export interface UseMouseReturn {
  /** The latest mouse value snapshot */
  snapshot: UseMouseValue;
  /** Function to enable subscriptions and rerender on next updates */
  watch: () => UseMouseValue;
}

export interface UseMouseValue {
  /** 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 type UseMouseCallback = (value: UseMouseValue, event: Event) => void;

export interface UseMouse {
  (target: HookTarget, callback?: UseMouseCallback): UseMouseReturn;

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

  (target?: Window, callback?: UseMouseCallback): UseMouseReturn;
}

Source

Source • Demo

Contributors

D

debabin

H

hywax