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:

• setEventListener
• setFocused
• isFocused

focusManager.setEventListener

setEventListener can be used to set a custom event listener:

1 import { focusManager } from 'react-query'
2 
3 focusManager.setEventListener(handleFocus => {
4   // Listen to visibilitychange and focus
5   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 set
12     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.

1 import { focusManager } from 'react-query'
2 
3 // Set focused
4 focusManager.setFocused(true)
5 
6 // Set unfocused
7 focusManager.setFocused(false)
8 
9 // Fallback to the default focus check
10 focusManager.setFocused(undefined)

Options

• focused: boolean | undefined

focusManager.isFocused

isFocused can be used to get the current focus state.

 const isFocused = focusManager.isFocused()