Sensors

useElementByPoint

Reactively tracks the DOM element at specified x/y coordinates using document.elementFromPoint(). Uses requestAnimationFrame for continuous polling and supports both single and multiple element detection modes. Includes pausable controls.

Demo

useElementByPoint

Not Supported

Move your mouse around to detect elements at the cursor position.

Tag

—

import { 
const useElementByPoint: <M extends boolean = false>(options: DeepMaybeObservable<UseElementByPointOptions<M>>) => UseElementByPointReturn<M>
useElementByPoint } from "@usels/web";

function 
function ElementTracker(): JSX.Element
ElementTracker() {
  const { 
const element$: any
element$, 
const isActive$: any
isActive$, 
const pause: any
pause, 
const resume: any
resume } = 
useElementByPoint<false>(options: DeepMaybeObservable<UseElementByPointOptions<false>>): UseElementByPointReturn<false>
Framework-agnostic reactive element-at-point tracker using
document.elementFromPoint() (or elementsFromPoint() in multiple mode).
Runs a requestAnimationFrame loop that polls the current (x, y) each frame
and syncs the result into element$. Pausable via pause() / resume().
useElementByPoint({
    
x: number
x: 100,
    
y: number
y: 200,
  });

  return (
    <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Element: {
const element$: any
element$.
any
get()?.
any
tagName ?? "none"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Active: {
const isActive$: any
isActive$.
any
get() ? "Yes" : "No"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button 
DOMAttributes<HTMLButtonElement>.onClick?: MouseEventHandler<HTMLButtonElement> | undefined
onClick={
const isActive$: any
isActive$.
any
get() ? 
const pause: any
pause : 
const resume: any
resume}>
        {
const isActive$: any
isActive$.
any
get() ? "Pause" : "Resume"}
      </
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
    </
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

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

function ElementTracker() {
  "use scope";
  const { element$, isActive$, pause, resume } = createElementByPoint({
    x: 100,
    y: 200,
  });

  return (
    <div>
      <p>Element: {element$.get()?.tagName ?? "none"}</p>
      <p>Active: {isActive$.get() ? "Yes" : "No"}</p>
      <button onClick={isActive$.get() ? pause : resume}>
        {isActive$.get() ? "Pause" : "Resume"}
      </button>
    </div>
  );
}

Multiple Elements

// @noErrors
import { useElementByPoint } from "@usels/web";

// Returns all elements at the point (uses elementsFromPoint)
const { element$ } = useElementByPoint({
  x: () => mouseX,
  y: () => mouseY,
  multiple: true,
});
// element$.get() is Element[]

Source

View on GitHub