Hook to determine if current page window/tab is visible.

useIsPageVisible.js

import { useEffect, useState } from 'react';

let hidden, visibilityChange;

if (typeof document.hidden !== 'undefined') {
  hidden = 'hidden';
  visibilityChange = 'visibilitychange';
} else if (typeof document.msHidden !== 'undefined') {
  hidden = 'msHidden';
  visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
  hidden = 'webkitHidden';
  visibilityChange = 'webkitvisibilitychange';
}

export default function useIsPageVisible() {
  const [isVisible, setIsVisible] = useState(!document['hidden']);

  useEffect(() => {
    const handleVisibilityChange = () => {
      setIsVisible(!document[hidden]);
    };

    document.addEventListener(visibilityChange, handleVisibilityChange);

    return () => {
      document.removeEventListener(visibilityChange, handleVisibilityChange);
    };
  }, []);

  return isVisible;
}