useElementByPoint

Category

Sensors

Export Size

673 B

Last Changed

5 days ago

Reactive element by point

Demo

Usage

import { useElementByPoint, useMouse } from '@reause/core'

const { x, y } = useMouse({ type: 'client' })
const { element } = useElementByPoint({ x, y })

Source Forms

x and y are read-only value sources and take plain numbers. Resolve a React ref or state value at the call site; multiple stays a plain value / React ref (a behavior toggle):

const { x, y } = useMouse({ type: 'client' })

const { element } = useElementByPoint({ x, y }) // read on every scheduler tick
const { element: refElement } = useElementByPoint({ x: xRef.current, y: yRef.current })

Type Declarations

export interface UseElementByPointOptions<Multiple extends boolean = false> {
    x: number;
    y: number;
    multiple?: Multiple;
    document?: Document;
    scheduler?: (cb: () => void) => Pausable;
}

export interface UseElementByPointReturn<Multiple extends boolean = false> {
    isSupported: boolean;
    element: Multiple extends true ? HTMLElement[] : HTMLElement | null;
    isActive: boolean;
    pause: () => void;
    resume: () => void;
}

export function useElementByPoint<M extends boolean = false>(options: UseElementByPointOptions<M>): UseElementByPointReturn<M>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e608a - feat(ci): align CI, packaging and release with VueUse

40091 - fix(core): resolve useElementByPoint audit findings (#548)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)