FocusManager
Der FocusManager verwaltet den Fokusstatus innerhalb von TanStack Query.
Er kann verwendet werden, um die Standard-Event-Listener zu ändern oder den Fokusstatus manuell zu ändern.
Ihre verfügbaren Methoden sind
focusManager.setEventListener
setEventListener kann verwendet werden, um einen benutzerdefinierten Event-Listener festzulegen.
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 kann verwendet werden, um Änderungen des Sichtbarkeitsstatus zu abonnieren. Es gibt eine Funktion zum Abbestellen zurück.
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 kann verwendet werden, um den Fokusstatus manuell festzulegen. Setzen Sie undefined, um auf die Standard-Fokusprüfung zurückzufallen.
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)
Optionen
- focused: boolean | undefined
focusManager.isFocused
isFocused kann verwendet werden, um den aktuellen Fokusstatus abzurufen.
tsx
const isFocused = focusManager.isFocused()
const isFocused = focusManager.isFocused()
