FocusManager

Defined in: packages/query-core/src/focusManager.ts:14

The FocusManager manages the focus state within TanStack Query.

It can be used to change the default event listeners or to manually change the focus state.

Extends

Subscribable<Listener>

Properties

listeners

protected listeners: Set<Listener>;

Defined in: packages/query-core/src/subscribable.ts:2

Inherited from

Subscribable.listeners

Methods

hasListeners()

hasListeners(): boolean;

Defined in: packages/query-core/src/subscribable.ts:19

Returns

boolean

Inherited from

Subscribable.hasListeners

isFocused()

isFocused(): boolean;

Defined in: packages/query-core/src/focusManager.ts:128

isFocused can be used to get the current focus state.

Returns

boolean

onFocus()

onFocus(): void;

Defined in: packages/query-core/src/focusManager.ts:118

onFocus notifies all subscribed listeners with the current focus state.

Returns

void

onSubscribe()

protected onSubscribe(): void;

Defined in: packages/query-core/src/focusManager.ts:39

Returns

void

Overrides

Subscribable.onSubscribe

onUnsubscribe()

protected onUnsubscribe(): void;

Defined in: packages/query-core/src/focusManager.ts:45

Returns

void

Overrides

Subscribable.onUnsubscribe

setEventListener()

setEventListener(setup): void;

Defined in: packages/query-core/src/focusManager.ts:77

setEventListener can be used to set a custom event listener that will be used to determine the focus state. The provided setup function receives a setFocused callback: call it with a boolean to manually set the focus state, or with no arguments to re-evaluate the current focus state and notify subscribers.

Parameters

setup

SetupFn

Returns

void

Example

import { focusManager } from '@tanstack/query-core'

focusManager.setEventListener((handleFocus) => {
  const listener = () => handleFocus()
  // Listen to visibilitychange
  if (typeof window !== 'undefined' && window.addEventListener) {
    window.addEventListener('visibilitychange', listener, false)
  }

  return () => {
    // Be sure to unsubscribe if a new handler is set
    window.removeEventListener('visibilitychange', listener)
  }
})

setFocused()

setFocused(focused?): void;

Defined in: packages/query-core/src/focusManager.ts:107

setFocused can be used to manually set the focus state. Set undefined to fall back to the default focus check.

Parameters

focused?

boolean

Returns

void

Example

import { focusManager } from '@tanstack/query-core'

// Set focused
focusManager.setFocused(true)

// Set unfocused
focusManager.setFocused(false)

// Fallback to the default focus check
focusManager.setFocused(undefined)