The FocusManager manages the focus state within Svelte Query.

It can be used to change the default event listeners or to manually change the focus state.

Its available methods are:


setEventListener can be used to set a custom event listener:

import { focusManager } from '@sveltestack/svelte-query'
focusManager.setEventListener(handleFocus => {
// Listen to visibillitychange 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)


setFocused can be used to manually set the focus state. Set undefined to fallback to the default focus check.

import { focusManager } from '@sveltestack/svelte-query'
// Set focused
// Set unfocused
// Fallback to the default focus check


  • focused: boolean | undefined


isFocused can be used to get the current focus state.

const isFocused = focusManager.isFocused()
Was this page helpful?

Subscribe to our newsletter

The latest TanStack news, articles, and resources, sent to your inbox.

    I won't send you spam.

    Unsubscribe at any time.

    © 2020 Tanner Linsley. All rights reserved.