useVisibilityChange
Track document visibility and respond to changes with useVisibilityChange.
Install:
npm i @uidotdev/usehooks
Description:
The useVisibilityChange hook is useful for tracking the visibility state of a document or web page. It allows you to easily detect when the document is visible or hidden, and perform certain actions based on that information. The hook returns a boolean value indicating whether the document is currently visible or not, allowing components to react accordingly and update their rendering or behavior based on the visibility state.
Return Value
| Name | Type | Description |
|---|---|---|
| documentVisible | boolean | true if the document is currently visible, false otherwise. |
Demo:
Example:
import * as React from "react";
import { useVisibilityChange } from "@uidotdev/usehooks";
export default function App() {
const documentVisible = useVisibilityChange();
const [tabAwayCount, setTabAwayCount] = React.useState(0);
React.useEffect(() => {
if (documentVisible === false) {
setTabAwayCount((c) => c + 1);
}
}, [documentVisible]);
return (
<section>
<h1>useVisibilityChange</h1>
<div>Tab Away Count: {tabAwayCount}</div>
</section>
);
}