REACT

useOnlineStatus Hook

A custom React Hook to detect network online/offline status with TypeScript support

ReactHooksNetworkConnectivityUI

Code

import { useState, useEffect } from 'react';

function useOnlineStatus(): boolean {
  const [isOnline, setIsOnline] = useState(() => {
    __TOKEN_21__ (typeof window === 'undefined') return true;
    return window.navigator.onLine;
  });

  useEffect(() => {
    __TOKEN_25__ (typeof window === 'undefined') return;

    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

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

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

  return isOnline;
}

// Usage example
// const isOnline = useOnlineStatus();
// <div className={isOnline ? 'online' : 'offline'}>
//   {isOnline ? 'Connected' : 'No internet connection'}
// </div>
// useEffect(() => {
//   if (!isOnline) {
//     // Show offline notification
//   }
// }, [isOnline]);