Event Handling
useDocumentVisibilityState
Returns the current visibility state of the document (visible/hidden).
About
Returns the visibility state of the document. Returns null on the server.
Examples
Read the current visibility state
import { useEffect } from "react";
import { useDocumentVisibilityState } from "rooks";
export default function App() {
const isDocumentVisible = useDocumentVisibilityState();
useEffect(() => {
console.log(isDocumentVisible);
}, [isDocumentVisible]);
return <p>Try switching to a different tab and check console </p>;
}Pause work when the tab becomes hidden
import { useEffect, useState } from "react";
import { useDocumentVisibilityState } from "rooks";
export default function PollingStatus() {
const visibilityState = useDocumentVisibilityState();
const [status, setStatus] = useState("active");
useEffect(() => {
setStatus(visibilityState === "hidden" ? "paused" : "active");
}, [visibilityState]);
return <p>Polling is currently {status}</p>;
}