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.
Its available methods are:
setEventListener can be used to set a custom event listener:
import { focusManager } from '@tanstack/react-query' focusManager.setEventListener(handleFocus => { // Listen to visibilitychange and focus if (typeof window !== 'undefined' && window.addEventListener) { window.addEventListener('visibilitychange', handleFocus, false) window.addEventListener('focus', handleFocus, false) } return () => { // Be sure to unsubscribe if a new handler is set window.removeEventListener('visibilitychange', handleFocus) window.removeEventListener('focus', handleFocus) } })
import { focusManager } from '@tanstack/react-query' focusManager.setEventListener(handleFocus => { // Listen to visibilitychange and focus if (typeof window !== 'undefined' && window.addEventListener) { window.addEventListener('visibilitychange', handleFocus, false) window.addEventListener('focus', handleFocus, false) } return () => { // Be sure to unsubscribe if a new handler is set window.removeEventListener('visibilitychange', handleFocus) window.removeEventListener('focus', handleFocus) } })
setFocused can be used to manually set the focus state. Set undefined to fall back to the default focus check.
import { focusManager } from '@tanstack/react-query' // Set focused focusManager.setFocused(true) // Set unfocused focusManager.setFocused(false) // Fallback to the default focus check focusManager.setFocused(undefined)
import { focusManager } from '@tanstack/react-query' // Set focused focusManager.setFocused(true) // Set unfocused focusManager.setFocused(false) // Fallback to the default focus check focusManager.setFocused(undefined)
Options
isFocused can be used to get the current focus state.
const isFocused = focusManager.isFocused()
const isFocused = focusManager.isFocused()