useNetworkStatus

The useNetworkStatus hook monitors the browser's network connection state. It provides a simple boolean isOnline and optionally the timestamp when the connection was lost. This is essential for building offline-first applications or displaying connection warnings.

Demo

You are Offline

Please check your internet connection.

Disconnect from Wi-Fi/Ethernet or toggle Offline mode in DevTools to test.

Source Code

Copy this code into src/hooks/useNetworkStatus.ts:

import { useState, useEffect } from 'react';

export interface NetworkStatus {
  isOnline: boolean;
  offlineAt?: Date;
}

export const useNetworkStatus = (): NetworkStatus => {
  const [status, setStatus] = useState<NetworkStatus>({
    isOnline: typeof navigator !== 'undefined' ? navigator.onLine : true,
  });

  useEffect(() => {
    const handleOnline = () => setStatus({ isOnline: true });
    const handleOffline = () => setStatus({ isOnline: false, offlineAt: new Date() });

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

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

  return status;
};

Usage

import { useNetworkStatus } from '@/hooks/useNetworkStatus';

const AppStatus = () => {
  const { isOnline, offlineAt } = useNetworkStatus();

  if (isOnline) {
    return <div>All systems go!</div>;
  }

  return (
    <div className="bg-red-500 text-white p-2">
      You are offline. Connection lost at {offlineAt?.toLocaleTimeString()}.
    </div>
  );
};

API Reference

Return Value

Property	Type	Description
`isOnline`	`boolean`	`true` if the browser is online, `false` otherwise.
`offlineAt`	`Date \| undefined`	The date object representing when the offline event was triggered.