⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	10
📊 Variables & Constants	5
📐 Interfaces	2

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useIdle/index.ts

📦 Imports

Name	Source
ConfigurableEventFilter	@vueuse/shared
ShallowRef	vue
ConfigurableWindow	../_configurable
WindowEventName	../useEventListener
createFilterWrapper	@vueuse/shared
throttleFilter	@vueuse/shared
timestamp	@vueuse/shared
shallowRef	vue
defaultWindow	../_configurable
useEventListener	../useEventListener

---

Variables & Constants

Name	Type	Kind	Value	Exported
defaultEvents	WindowEventName[]	const	['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel']	✗
oneMinute	60000	const	60_000	✗
timer	any	let/var	*not shown*	✗
document	Document	const	window.document	✗
listenerOptions	{ passive: boolean; }	const	{ passive: true }	✗

---

Functions

useIdle(timeout: number, options: UseIdleOptions): UseIdleReturn

Code

export function useIdle(
  timeout: number = oneMinute,
  options: UseIdleOptions = {},
): UseIdleReturn {
  const {
    initialState = false,
    listenForVisibilityChange = true,
    events = defaultEvents,
    window = defaultWindow,
    eventFilter = throttleFilter(50),
  } = options
  const idle = shallowRef(initialState)
  const lastActive = shallowRef(timestamp())

  let timer: any

  const reset = () => {
    idle.value = false
    clearTimeout(timer)
    timer = setTimeout(() => idle.value = true, timeout)
  }

  const onEvent = createFilterWrapper(
    eventFilter,
    () => {
      lastActive.value = timestamp()
      reset()
    },
  )

  if (window) {
    const document = window.document
    const listenerOptions = { passive: true }

    for (const event of events)
      useEventListener(window, event, onEvent, listenerOptions)

    if (listenForVisibilityChange) {
      useEventListener(document, 'visibilitychange', () => {
        if (!document.hidden)
          onEvent()
      }, listenerOptions)
    }

    reset()
  }

  return {
    idle,
    lastActive,
    reset,
  }
}

• JSDoc:

  /**
   * Tracks whether the user is being inactive.
   *
   * @see https://vueuse.org/useIdle
   * @param timeout default to 1 minute
   * @param options IdleOptions
   */
  

• Parameters:

• timeout: number
• options: UseIdleOptions
• Return Type: UseIdleReturn
• Calls:
• throttleFilter (from @vueuse/shared)
• shallowRef (from vue)
• timestamp (from @vueuse/shared)
• clearTimeout
• setTimeout
• createFilterWrapper (from @vueuse/shared)
• reset
• useEventListener (from ../useEventListener)
• onEvent

reset(): void

Code

() => {
    idle.value = false
    clearTimeout(timer)
    timer = setTimeout(() => idle.value = true, timeout)
  }

• Return Type: void
• Calls:
• clearTimeout
• setTimeout

---

Interfaces

UseIdleOptions

Interface Code

export interface UseIdleOptions extends ConfigurableWindow, ConfigurableEventFilter {
  /**
   * Event names that listen to for detected user activity
   *
   * @default ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel']
   */
  events?: WindowEventName[]
  /**
   * Listen for document visibility change
   *
   * @default true
   */
  listenForVisibilityChange?: boolean
  /**
   * Initial state of the ref idle
   *
   * @default false
   */
  initialState?: boolean
}

Properties

Name	Type	Optional	Description
events	WindowEventName[]	✓
listenForVisibilityChange	boolean	✓
initialState	boolean	✓

UseIdleReturn

Interface Code

export interface UseIdleReturn {
  idle: ShallowRef<boolean>
  lastActive: ShallowRef<number>
  reset: () => void
}

Properties

Name	Type	Optional	Description
idle	ShallowRef<boolean>	✗
lastActive	ShallowRef<number>	✗
reset	() => void	✗

---