react_custom_hook_useOnlineStatus_browser_network_detection.ts

1import { useState, useEffect } from 'react';
2
3// The Custom Hook
4function useOnlineStatus(): boolean {
5  const [isOnline, setIsOnline] = useState<boolean>(true);
6
7  useEffect(() => {
8    function handleOnline() {
9      setIsOnline(true);
10    }
11    function handleOffline() {
12      setIsOnline(false);
13    }
14    window.addEventListener('online', handleOnline);
15    window.addEventListener('offline', handleOffline);
16    return () => {
17      window.removeEventListener('online', handleOnline);
18      window.removeEventListener('offline', handleOffline);
19    };
20  }, []);
21
22  return isOnline;
23}
24
25// Component using the Hook
26function StatusBar() {
27  const isOnline = useOnlineStatus();
28  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
29}
30
31export default function App() {
32  return <StatusBar />;
33}