State hook for detecting online status

useOnlineStatus.tsx

// Custom hook
import { useState, useEffect } from "react";

export function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState<boolean>(true);

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }

    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener("online", () => handleOnline);
    window.addEventListener("offline", () => handleOffline);

    return () => {
      window.removeEventListener("online", () => handleOnline);
      window.removeEventListener("offline", () => handleOffline);
    };
  }, []);

  return isOnline;
}

// Statusbar component
"use client";

import { useOnlineStatus } from "@/app/hooks/useOnlineStatus";

export default function StatusBar() {
  const online = useOnlineStatus();

  return (
    <div
      className={`fixed top-0 left-0 z-50 flex item-center justify-center w-full text-center px-4 py-1 text-white ${
        online ? "bg-green-600" : "bg-red-500"
      }`}
    >
      {online ? "Online ✅" : "Offline ❌"}
    </div>
  );
}