react-hook-granth/src/hooks/useOnlineStatus.js

A collection of custom React hooks for efficient state management and UI logic.

import { useEffect, useState } from "react";

/**
 * Custom hook to track online/offline status.
 * @returns {boolean} - `true` if online, `false` if offline.
 */
export default function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const goOnline = () => setIsOnline(true);
    const goOffline = () => setIsOnline(false);

    window.addEventListener("online", goOnline);
    window.addEventListener("offline", goOffline);

    // Clean up
    return () => {
      window.removeEventListener("online", goOnline);
      window.removeEventListener("offline", goOffline);
    };
  }, []);

  return isOnline;
}