⬅️ Back to Table of Contents

📄 useElementByPoint

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	11
📐 Interfaces	2

📚 Table of Contents

• Imports
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useElementByPoint/index.ts

📦 Imports

Name	Source
Pausable	@vueuse/shared
MaybeRefOrGetter	vue
ShallowRef	vue
ConfigurableDocument	../_configurable
ConfigurableScheduler	../_configurable
Supportable	../types
shallowRef	vue
toValue	vue
defaultDocument	../_configurable
useRafFn	../useRafFn
useSupported	../useSupported

---

Functions

useElementByPoint(options: UseElementByPointOptions<M>): UseElementByPointReturn<M>

Reactive element by point.

Parameters:

• options any: UseElementByPointOptions

See: https://vueuse.org/useElementByPoint

Raw JSDoc

/**
 * Reactive element by point.
 *
 * @see https://vueuse.org/useElementByPoint
 * @param options - UseElementByPointOptions
 */

Calls:

• useSupported (from ../useSupported)
• toValue (from vue)
• shallowRef (from vue)
• scheduler
• document?.elementsFromPoint
• document?.elementFromPoint

Code

export function useElementByPoint<M extends boolean = false>(options: UseElementByPointOptions<M>): UseElementByPointReturn<M> {
  const {
    x,
    y,
    document = defaultDocument,
    multiple,
    scheduler = useRafFn,
  } = options

  const isSupported = useSupported(() => {
    if (toValue(multiple))
      return document && 'elementsFromPoint' in document

    return document && 'elementFromPoint' in document
  })

  const element = shallowRef<any>(null)

  const controls = scheduler(() => {
    element.value = toValue(multiple)
      ? document?.elementsFromPoint(toValue(x), toValue(y)) ?? []
      : document?.elementFromPoint(toValue(x), toValue(y)) ?? null
  })

  return {
    isSupported,
    element,
    ...controls,
  }
}

---

Interfaces

UseElementByPointOptions<Multiple extends boolean = false>

Interface Code

export interface UseElementByPointOptions<Multiple extends boolean = false> extends ConfigurableDocument, ConfigurableScheduler {
  x: MaybeRefOrGetter<number>
  y: MaybeRefOrGetter<number>
  multiple?: MaybeRefOrGetter<Multiple>
}

Properties

Name	Type	Optional	Description
x	MaybeRefOrGetter<number>	✗	not shown
y	MaybeRefOrGetter<number>	✗	not shown
multiple	MaybeRefOrGetter<Multiple>	✓	not shown

UseElementByPointReturn<Multiple extends boolean = false>

Interface Code

export interface UseElementByPointReturn<Multiple extends boolean = false> extends Supportable, Pausable {
  element: ShallowRef<Multiple extends true ? HTMLElement[] : HTMLElement | null>
}

Properties

Name	Type	Optional	Description
element	ShallowRef<Multiple extends true ? HTMLElement[] : HTMLElement \| null>	✗	not shown

---

Generated by Syntax Scribe