useVisibilityChange

Track document visibility state.

https://www.shaktools.com/shak-hooks

Sensor

API Reference

Installation

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useVisibilityChange } from "@shak-hooks/usehooks";

Source: packages/react/src/useVisibilityChange.ts

Signature

signature.ts

export function useVisibilityChange(): boolean

Parameters

No parameters.

Returns

boolean

Implementation

use-visibility-change.ts

1import { useEffect, useState } from "react";

3export function useVisibilityChange() {

4 const [isVisible, setIsVisible] = useState(true);

6 useEffect(() => {

7 const handleVisibilityChange = () => {

8 setIsVisible(document.visibilityState === "visible");

9 };

11 document.addEventListener("visibilitychange", handleVisibilityChange);

12 return () => {

13 document.removeEventListener("visibilitychange", handleVisibilityChange);

14 };

15 }, []);

17 return isVisible;

18}

Google Ads

Usage

example.tsx

1import { useVisibilityChange } from "@shak-hooks/usehooks";

3const result = useVisibilityChange();

4// result: boolean

5// Use values directly (React state).