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:
focusManager.setEventListenersetEventListener 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) }})focusManager.setFocusedsetFocused can be used to manually set the focus state. Set undefined to fallback to the default focus check.
import { focusManager } from '@tanstack/react-query'
// Set focusedfocusManager.setFocused(true)
// Set unfocusedfocusManager.setFocused(false)
// Fallback to the default focus checkfocusManager.setFocused(undefined)Options
focused: boolean | undefinedfocusManager.isFocusedisFocused can be used to get the current focus state.
const isFocused = focusManager.isFocused()Fast track your learning and
take the offical React Query course ↗️
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.