Skip to content

⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric Count
🔧 Functions 2
📦 Imports 10
📊 Variables & Constants 2
🟢 Vue Composition API 1
📐 Interfaces 1

📚 Table of Contents

🛠️ File Location:

📂 packages/core/useElementHover/index.ts

📦 Imports

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

Variables & Constants

Name Type Kind Value Exported
timer ReturnType<typeof setTimeout> | undefined let/var *not shown* ✗
delay number const entering ? delayEnter : delayLeave ✗

Vue Composition API

Name Type Reactive Variables Composables
computed computed none none

Functions

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

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: ReturnType<typeof setTimeout> | undefined

  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
}
  • Parameters:
  • el: MaybeRefOrGetter<EventTarget | null | undefined>
  • options: UseElementHoverOptions
  • Return Type: ShallowRef<boolean>
  • Calls:
  • shallowRef (from vue)
  • clearTimeout
  • setTimeout
  • useEventListener (from ../useEventListener)
  • toggle
  • onElementRemoval (from ../onElementRemoval)
  • computed (from vue)
  • unrefElement (from ../unrefElement)

toggle(entering: boolean): void

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
  }
  • Parameters:
  • entering: boolean
  • Return Type: void
  • Calls:
  • clearTimeout
  • setTimeout

Interfaces

UseElementHoverOptions

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

Properties

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