⬅️ Back to Table of Contents

📄 useWindowFocus

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	5

📚 Table of Contents

• Imports
• Functions

🛠️ File Location:

📂 packages/core/useWindowFocus/index.ts

📦 Imports

Name	Source
ShallowRef	vue
ConfigurableWindow	../_configurable
shallowRef	vue
defaultWindow	../_configurable
useEventListener	../useEventListener

---

Functions

useWindowFocus(options: ConfigurableWindow): ShallowRef<boolean>

Reactively track window focus with window.onfocus and window.onblur.

See: https://vueuse.org/useWindowFocus

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactively track window focus with `window.onfocus` and `window.onblur`.
 *
 * @see https://vueuse.org/useWindowFocus
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• shallowRef (from vue)
• window.document.hasFocus
• useEventListener (from ../useEventListener)

Code

export function useWindowFocus(options: ConfigurableWindow = {}): ShallowRef<boolean> {
  const { window = defaultWindow } = options
  if (!window)
    return shallowRef(false)

  const focused = shallowRef(window.document.hasFocus())

  const listenerOptions = { passive: true }

  useEventListener(window, 'blur', () => {
    focused.value = false
  }, listenerOptions)

  useEventListener(window, 'focus', () => {
    focused.value = true
  }, listenerOptions)

  return focused
}

---

Generated by Syntax Scribe