FocusManager
The FocusManager 管理 TanStack Query 内的焦点状态。
它可以用于更改默认的事件监听器或手动更改焦点状态。
其可用方法有
focusManager.setEventListener
setEventListener 可用于设置自定义事件监听器
tsx
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)
}
})
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 可用于订阅可见性状态的变化。它返回一个取消订阅函数
tsx
import { focusManager } from '@tanstack/react-query'
const unsubscribe = focusManager.subscribe((isVisible) => {
console.log('isVisible', isVisible)
})
import { focusManager } from '@tanstack/react-query'
const unsubscribe = focusManager.subscribe((isVisible) => {
console.log('isVisible', isVisible)
})
focusManager.setFocused
setFocused 可用于手动设置焦点状态。设置 undefined 将回退到默认焦点检查。
tsx
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)
选项
- focused: boolean | undefined
focusManager.isFocused
isFocused 可用于获取当前焦点状态。
tsx
const isFocused = focusManager.isFocused()
const isFocused = focusManager.isFocused()
