⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	11
📊 Variables & Constants	1
📐 Interfaces	2

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useElementByPoint/index.ts

📦 Imports

Name	Source
Pausable	@vueuse/shared
ComputedRef	vue
MaybeRefOrGetter	vue
ShallowRef	vue
ConfigurableDocument	../_configurable
useIntervalFn	@vueuse/shared
shallowRef	vue
toValue	vue
defaultDocument	../_configurable
useRafFn	../useRafFn
useSupported	../useSupported

---

Variables & Constants

Name	Type	Kind	Value	Exported
controls	Pausable	const	`interval === 'requestAnimationFrame'
? useRafFn(cb, { immediate })
: useIntervalFn(cb, interval, { immediate })`	✗

---

Functions

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

Code

export function useElementByPoint<M extends boolean = false>(options: UseElementByPointOptions<M>): UseElementByPointReturn<M> {
  const {
    x,
    y,
    document = defaultDocument,
    multiple,
    interval = 'requestAnimationFrame',
    immediate = true,
  } = options

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

    return document && 'elementFromPoint' in document
  })

  const element = shallowRef<any>(null)

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

  const controls: Pausable = interval === 'requestAnimationFrame'
    ? useRafFn(cb, { immediate })
    : useIntervalFn(cb, interval, { immediate })

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

• JSDoc:

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

• Parameters:

• options: UseElementByPointOptions<M>
• Return Type: UseElementByPointReturn<M>
• Calls:
• useSupported (from ../useSupported)
• toValue (from vue)
• shallowRef (from vue)
• document?.elementsFromPoint
• document?.elementFromPoint
• useRafFn (from ../useRafFn)
• useIntervalFn (from @vueuse/shared)

cb(): void

Code

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

• Return Type: void
• Calls:
• toValue (from vue)
• document?.elementsFromPoint
• document?.elementFromPoint

---

Interfaces

UseElementByPointOptions<Multiple extends boolean = false>

Interface Code

export interface UseElementByPointOptions<Multiple extends boolean = false> extends ConfigurableDocument {
  x: MaybeRefOrGetter<number>
  y: MaybeRefOrGetter<number>
  multiple?: MaybeRefOrGetter<Multiple>
  immediate?: boolean
  interval?: 'requestAnimationFrame' | number
}

Properties

Name	Type	Optional	Description
x	MaybeRefOrGetter<number>	✗
y	MaybeRefOrGetter<number>	✗
multiple	MaybeRefOrGetter<Multiple>	✓
immediate	boolean	✓
interval	'requestAnimationFrame' | number	✓

UseElementByPointReturn<Multiple extends boolean = false>

Interface Code

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

Properties

Name	Type	Optional	Description
isSupported	ComputedRef<boolean>	✗
element	ShallowRef<Multiple extends true ? HTMLElement[] : HTMLElement | null>	✗

---