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.setEventListener
setEventListener
can be used to set a custom event listener:
import { focusManager } from '@tanstack/react-query'
focusManager.setEventListener((handleFocus) => {
// Listen to visibilitychange
if (typeof window !== 'undefined' && window.addEventListener) {
window.addEventListener('visibilitychange', handleFocus, false)
}
return () => {
// Be sure to unsubscribe if a new handler is set
window.removeEventListener('visibilitychange', handleFocus)
}
})
focusManager.subscribe
subscribe
can be used to subscribe to changes in the visibility state. It returns an unsubscribe function:
import { focusManager } from '@tanstack/react-query'
const unsubscribe = focusManager.subscribe((isVisible) => {
console.log('isVisible', isVisible)
})
focusManager.setFocused
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)
Options
focused: boolean | undefined
focusManager.isFocused
isFocused
can be used to get the current focus state.
const isFocused = focusManager.isFocused()