useNavigatorOnline | Dimitrios Lytras

useNavigatorOnline.js

import {useEffect, useState} from 'react';

export function useNavigatorOnline() {
  const [value, setValue] = useState(window.navigator.onLine);

  useEffect(() => {
    function handleOnlineStatus() {
      setValue(window.navigator.onLine);
    }

    window.addEventListener('online', handleOnlineStatus);
    window.addEventListener('offline', handleOnlineStatus);

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

  return {isOnline: value, isOffline: !value};
}

And here's how you can use it in your component:

App.tsx

function App() {
  const {isOffline} = useNavigatorOnline();

  if (isOffline) {
    return <NoConnectionMessage />;
  }

  return <div>...</div>;
}