FocusManager
The FocusManager manages the focus state within React Query.
It can be used to change the default event listeners or to manually change the focus state.
Its available methods are:
focusManager.setEventListener
setEventListener can be used to set a custom event listener:
TypeScript
1import { focusManager } from '@tanstack/react-query'2 3focusManager.setEventListener(handleFocus => {4 // Listen to visibilitychange and focus5 if (typeof window !== 'undefined' && window.addEventListener) {6 window.addEventListener('visibilitychange', handleFocus, false)7 window.addEventListener('focus', handleFocus, false)8 }9 10 return () => {11 // Be sure to unsubscribe if a new handler is set12 window.removeEventListener('visibilitychange', handleFocus)13 window.removeEventListener('focus', handleFocus)14 }15})focusManager.setFocused
setFocused can be used to manually set the focus state. Set undefined to fallback to the default focus check.
TypeScript
1import { focusManager } from '@tanstack/react-query'2 3// Set focused4focusManager.setFocused(true)5 6// Set unfocused7focusManager.setFocused(false)8 9// Fallback to the default focus check10focusManager.setFocused(undefined)Options
focused: boolean | undefined
focusManager.isFocused
isFocused can be used to get the current focus state.
TypeScript
1const isFocused = focusManager.isFocused()