A simple React hook to get online status and listen for changes

onlinestatus.js

import React, { useState } from 'react';
import useOnlineStatus from './useOnlineStatus';

const Example = () => {
  const [onlineStatus, setOnlineStatus] = useState(navigator.onLine);

  useOnlineStatus((isOnline) => {
    setOnlineStatus(isOnline);
  });

  return (
    <h3>This site is {onlineStatus ? 'online' : 'offline'}</h3>
  );
};

export default Example;

useOnlineStatus.js

import React, { useEffect, useRef } from 'react';

function useOnelineStatus(callback) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  const isOnline = () => {
    savedCallback.current(true);
  };
  const isOffline = () => {
    savedCallback.current(false);
  };

  useEffect(() => {
    savedCallback.current(navigator.onLine);

    window.addEventListener('online', isOnline);
    window.addEventListener('offline', isOffline);

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

export default useOnelineStatus;