useDocumentVisibility

跟蹤 document.visibilityState 的 React Hook

Usage

即時編輯器

function Demo() {
  const visibility = useDocumentVisibility("hidden");
  const [message, setMessage] = useState(
    "💡 最小化頁面或切換標籤然後返回",
  );

  useEffect(() => {
    if (visibility === "visible") {
      setTimeout(() => {
        setMessage("🎉 歡迎回來!");
      }, 2000);
    }
    else {
      setTimeout(() => {
        setMessage("🥰 休息一下");
      }, 2000);
    }
  }, [visibility]);

  return <div>{message}</div>;
}

結果

Error: Minified React error #185; visit https://react.dev/errors/185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

API

useDocumentVisiblity

Returns

DocumentVisibilityState: 文檔可見性

Arguments

參數名	描述	類型	預設值
defaultValue	默认值	DocumentVisibilityState | undefined	-