useVisibilityChange Hook React

import { useState, useEffect } from "react";

const useVisibilityChange = (callback) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const handleVisibilityChange = () => {
      setIsVisible(!document.hidden);
      if (callback) {
        callback(!document.hidden);
      }
    };

    document.addEventListener("visibilitychange", handleVisibilityChange);

    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, [callback]);

  return isVisible;
};

// Usage
const VisibilityChangeExample = () => {
  const handleVisibilityChange = (isVisible) => {
    if (isVisible) {
      console.log("Page is visible.");
    } else {
      console.log("Page is hidden.");
    }
  };

  const isVisible = useVisibilityChange(handleVisibilityChange);

  return (
    <div>
      <p>Page visibility: {isVisible ? "Visible" : "Hidden"}</p>
    </div>
  );
};