Hook to check the current visibility of the page using the API Page Visibility

useVisibilityChange.jsx

import { useEffect, useState } from "react";

/**
 * Hook to check the current visibility of the page
 * Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
 * @returns boolean
 */
const useVisibilityChange = () => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const handleOnVisibility = () => {
      setIsVisible(document.visibilityState === 'visible');
    };

    document.addEventListener("visibilitychange", handleOnVisibility);

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

  return isVisible;
};

export default useVisibilityChange;