⬅️ Back to Table of Contents

📄 useElementHover

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	11
🟢 Vue Composition API	1
📐 Interfaces	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useElementHover/index.ts

📦 Imports

Name	Source
TimerHandle	@vueuse/shared
MaybeRefOrGetter	vue
ShallowRef	vue
ConfigurableWindow	../_configurable
MaybeComputedElementRef	../unrefElement
computed	vue
shallowRef	vue
defaultWindow	../_configurable
onElementRemoval	../onElementRemoval
unrefElement	../unrefElement
useEventListener	../useEventListener

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none

---

Functions

useElementHover(el: MaybeRefOrGetter<EventTarget | null | u…, options: UseElementHoverOptions): ShallowRef<boolean>

Parameters:

• el MaybeRefOrGetter<EventTarget | null | undefined>
• options UseElementHoverOptions

Returns: ShallowRef<boolean>

Calls:

• shallowRef (from vue)
• clearTimeout
• setTimeout
• useEventListener (from ../useEventListener)
• toggle
• onElementRemoval (from ../onElementRemoval)
• computed (from vue)
• unrefElement (from ../unrefElement)

Code

export function useElementHover(el: MaybeRefOrGetter<EventTarget | null | undefined>, options: UseElementHoverOptions = {}): ShallowRef<boolean> {
  const {
    delayEnter = 0,
    delayLeave = 0,
    triggerOnRemoval = false,
    window = defaultWindow,
  } = options

  const isHovered = shallowRef(false)
  let timer: TimerHandle

  const toggle = (entering: boolean) => {
    const delay = entering ? delayEnter : delayLeave
    if (timer) {
      clearTimeout(timer)
      timer = undefined
    }

    if (delay)
      timer = setTimeout(() => isHovered.value = entering, delay)
    else
      isHovered.value = entering
  }

  if (!window)
    return isHovered

  useEventListener(el, 'mouseenter', () => toggle(true), { passive: true })
  useEventListener(el, 'mouseleave', () => toggle(false), { passive: true })

  if (triggerOnRemoval) {
    onElementRemoval(
      computed(() => unrefElement(el as MaybeComputedElementRef)),
      () => toggle(false),
    )
  }

  return isHovered
}

Internal helpers

Declared inside another function in this file.

toggle(entering: boolean): void

Parameters:

• entering boolean

Returns: void

Calls:

• clearTimeout
• setTimeout

Code

(entering: boolean) => {
    const delay = entering ? delayEnter : delayLeave
    if (timer) {
      clearTimeout(timer)
      timer = undefined
    }

    if (delay)
      timer = setTimeout(() => isHovered.value = entering, delay)
    else
      isHovered.value = entering
  }

---

Interfaces

UseElementHoverOptions

Interface Code

export interface UseElementHoverOptions extends ConfigurableWindow {
  delayEnter?: number
  delayLeave?: number
  triggerOnRemoval?: boolean
}

Properties

Name	Type	Optional	Description
delayEnter	number	✓	not shown
delayLeave	number	✓	not shown
triggerOnRemoval	boolean	✓	not shown

---

Generated by Syntax Scribe