useDocumentVisibility

Returns the current document visibility state.

Code

useDocumentVisibility.ts

import { useSyncExternalStore } from "react";

const subscribeToVisibility = (notify: () => void): (() => void) => {
  if (typeof document === "undefined") return () => {};
  document.addEventListener("visibilitychange", notify);
  return () => document.removeEventListener("visibilitychange", notify);
};

const getVisibility = (): DocumentVisibilityState =>
  typeof document === "undefined" ? "hidden" : document.visibilityState;

/** Returns the current document visibility state. */
export const useDocumentVisibility = (): DocumentVisibilityState =>
  useSyncExternalStore(subscribeToVisibility, getVisibility, () => "hidden");

Download

wget

Terminal

wget -O src/hooks/useDocumentVisibility.ts https://raw.githubusercontent.com/jrTilak/lazykit/HEAD/registry/react-hooks/useDocumentVisibility.ts

degit

Terminal

temp_dir="$(mktemp -d)" && bunx degit jrTilak/lazykit/registry/react-hooks "$temp_dir" && mv "$temp_dir/useDocumentVisibility.ts" src/hooks/useDocumentVisibility.ts && rm -r "$temp_dir"

Examples

useDocumentVisibility.example.tsx

import { useDocumentVisibility } from "./useDocumentVisibility";

export const DocumentVisibilityExample = () => {
  const visibility = useDocumentVisibility();
  return <p>Document is {visibility}.</p>;
};

Props

This hook takes no arguments.

Returns

DocumentVisibilityState. The server snapshot is "hidden".