use-document-visibility

1import { useSyncExternalStore } from 'react'
2 
3const DEFAULT_VISIBILITY_STATE: DocumentVisibilityState = 'visible'
4 
5function subscribe(onStoreChange: () => void) {
6  if (typeof document === 'undefined') {
7    return () => {}
8  }
9 
10  document.addEventListener('visibilitychange', onStoreChange, {
11    passive: true,
12  })
13 
14  return () => {
15    document.removeEventListener('visibilitychange', onStoreChange)
16  }
17}
18 
19function getSnapshot(): DocumentVisibilityState {
20  if (typeof document === 'undefined') {
21    return DEFAULT_VISIBILITY_STATE
22  }
23 
24  return document.visibilityState
25}
26 
27function getServerSnapshot(): DocumentVisibilityState {
28  return DEFAULT_VISIBILITY_STATE
29}
30 
31/**
32 * Reactively track `document.visibilityState`.
33 *
34 * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState
35 * @returns The current document visibility state.
36 */
37export function useDocumentVisibility(): DocumentVisibilityState {
38  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
39}