useNavigatorOnline

React hook to detect when your browser is online/offline
import {useEffect, useState} from 'react';

const 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};
};

export default useNavigatorOnline;

Use

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

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

  return <div>...</div>