useMousePressed

Tracks mouse/touch press state reactively. Returns an observable boolean for the pressed state and the source type that triggered it.

Demo

useMousePressed

Track mouse/touch press state reactively.

Released

Source: none

press or touch here

Usage

Hook

import { useMousePressed } from "@usels/web";

function Component() {
  const { pressed$, sourceType$ } = useMousePressed();

  return (
    <div>
      {pressed$.get() ? "Pressed" : "Released"} — {sourceType$.get() ?? "none"}
    </div>
  );
}

Scope

import { createMousePressed } from "@usels/web";

function Component() {
  "use scope"
  const { pressed$, sourceType$ } = createMousePressed();

  return (
    <div>
      {pressed$.get() ? "Pressed" : "Released"} — {sourceType$.get() ?? "none"}
    </div>
  );
}

With target element

By default events are listened on window. Pass any element via target to scope tracking to that element.

// @noErrors
import { useRef$ } from "@usels/core";
import { useMousePressed } from "@usels/web";

function Component() {
  const el$ = useRef$<HTMLDivElement>();
  const { pressed$ } = useMousePressed({ target: el$ });

  return (
    <div ref={el$} style={{ background: pressed$.get() ? "blue" : "gray" }}>
      Press me
    </div>
  );
}

Touch support

Touch tracking is enabled by default. Use touch: false to disable it.

// @noErrors
import { useMousePressed } from "@usels/web";
// ---cut---
// Disable touch tracking
const { pressed$ } = useMousePressed({ touch: false });

Callbacks (onPressed / onReleased)

Use onPressed and onReleased callbacks to react to press events without subscribing to observables.

// @noErrors
import { useMousePressed } from "@usels/web";
// ---cut---
const { pressed$ } = useMousePressed({
  onPressed: (e) => console.log("pressed", e),
  onReleased: (e) => console.log("released", e),
});

Prevent drag

Set preventDragEvent: true to prevent the default drag behavior while pressing.

// @noErrors
import { useMousePressed } from "@usels/web";
// ---cut---
const { pressed$ } = useMousePressed({ preventDragEvent: true });

Combined with useMouse

Use useMousePressed alongside useMouse to track both cursor position and press state simultaneously.

// @noErrors
import { useRef$ } from "@usels/core";
import { useMouse, useMousePressed } from "@usels/web";

function Component() {
  const el$ = useRef$<HTMLDivElement>();
  const { x$, y$ } = useMouse({ target: el$ });
  const { pressed$, sourceType$ } = useMousePressed({ target: el$ });

  return (
    <div ref={el$}>
      Position: {x$.get()}, {y$.get()}
      <br />
      Pressed: {String(pressed$.get())} ({sourceType$.get() ?? "none"})
    </div>
  );
}

Type

Parameters

Parameter	Type	Description
options	UseMousePressedOptions (optional)	-

UseMousePressedOptions

Option	Type	Default	Description
touch	boolean	-	Track touch events. Default: true
target	MaybeEventTarget	-	Event target for press detection. Default: window
preventDragEvent	boolean	-	Prevent drag — calls preventDefault on pointerdown. Default: false
onPressed	((e: PointerEvent | TouchEvent) => void)	-	Callback fired on press
onReleased	((e: PointerEvent | TouchEvent) => void)	-	Callback fired on release
window	WindowSource	-	-

Returns

UseMousePressedReturn

Name	Type	Description
pressed$	ReadonlyObservable<boolean>	Current pressed state
sourceType$	ReadonlyObservable<UseMousePressedSourceType>	Event source type: “mouse” | “touch” | null

Source

View on GitHub