useMousePressed

React Sensor Hook that tracks mouse pressing state.

Triggered by mousedown touchstart on target element and released by mouseup mouseleave touchend touchcancel on window

Usage

Live Editor

function Demo() {
  const [mouse, type] = useMousePressed();

  return (
    <div>
      <p>Pressed: {JSON.stringify(mouse)}</p>
      <p>SourceType: {JSON.stringify(type)}</p>
    </div>
  );
};

Result

Loading...

API

useMousePressed

Returns

readonly [boolean, UseMousePressedSourceType]: A tuple with the following elements:

• whether the mouse is pressed.
• the pressed source type

Arguments

Argument	Description	Type	DefaultValue
target	dom element	BasicTarget<Element>	-
options	optional params	UseMousePressedOptions | undefined	-

UseMousePressedOptions

Property	Description	Type	DefaultValue
touch	Listen to touchstart touchend events	boolean	true
drag	Listen to dragstart drop and dragend events	boolean	true
initialValue	Initial values	boolean | (() => boolean)	false

UseMousePressedSourceType

Type

export type UseMousePressedSourceType = "mouse" | "touch" | null;

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;