Custom react hook for checking client internet connection:- useOnlineStatus

 
import { useEffect, useState } from "react";
 
/**
 * useOnlineStatus
 *
 * React hook that returns the current online status of the browser.
 *
 * @returns {{ isOnline: boolean }} Object containing the online status
 */
const useOnlineStatus = () => {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
 
  /**
   * useEffect
   *
   * Adds event listeners for online and offline events and removes them on unmount.
   * Updates the online status whenever these events are fired.
   */
  useEffect(() => {
    /**
     * updateStatus
     *
     * Updates the online status of the browser.
     */
    const updateOnlineStatus = () => setIsOnline(navigator.onLine);
 
    window.addEventListener("online", updateOnlineStatus);
    window.addEventListener("offline", updateOnlineStatus);
 
    return () => {
      window.removeEventListener("online", updateOnlineStatus);
      window.removeEventListener("offline", updateOnlineStatus);
    };
  }, []);
 
  return { isOnline };
};
 
export default useOnlineStatus;