useDocumentVisibility

Installation

npx shadcn@latest add @shadcnhooks/use-document-visibility

pnpm dlx shadcn@latest add @shadcnhooks/use-document-visibility

yarn dlx shadcn@latest add @shadcnhooks/use-document-visibility

bun x shadcn@latest add @shadcnhooks/use-document-visibility

Copy and paste the following code into your project.

use-document-visibility.ts

import { useSyncExternalStore } from 'react'

const DEFAULT_VISIBILITY_STATE: DocumentVisibilityState = 'visible'

function subscribe(onStoreChange: () => void) {
  if (typeof document === 'undefined') {
    return () => {}
  }

  document.addEventListener('visibilitychange', onStoreChange, {
    passive: true,
  })

  return () => {
    document.removeEventListener('visibilitychange', onStoreChange)
  }
}

function getSnapshot(): DocumentVisibilityState {
  if (typeof document === 'undefined') {
    return DEFAULT_VISIBILITY_STATE
  }

  return document.visibilityState
}

function getServerSnapshot(): DocumentVisibilityState {
  return DEFAULT_VISIBILITY_STATE
}

/**
 * Reactively track `document.visibilityState`.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState
 * @returns The current document visibility state.
 */
export function useDocumentVisibility(): DocumentVisibilityState {
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
}

API

/**
 * Reactively track `document.visibilityState`.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState
 * @returns The current document visibility state.
 */
export function useDocumentVisibility(): DocumentVisibilityState

Credits