use-navigator-online

React Hooks to detect when your browser is online/offline using window.navigator.onLine.

Install

npm install use-navigator-online --save

Basic Usage

Update or create next.config.js with

import useNavigatorOnline from "use-navigator-online";

function Component() {
  const { isOnline, isOffline, backOnline, backOffline } = useNavigatorOnline();

  useEffect(() => {
    // Do something when network is back online.
  }, [backOnline]);

  useEffect(() => {
    // Do something when network goes offline.
  }, [backOffline]);

  return (
    <p>
      {isOnline ? "online" : "not online"}{" "}
      {isOffline ? "offline" : "not offline"}
    </p>
  );
}

Available Return Values

• isOnline: boolean - true when online, false otherwise.
• isOffline: boolean - true when offline, false otherwise.
• backOnline: boolean - true when network status changes from offline to online, false otherwise.
• backOffline: boolean - true when network status changes from online to offline, false otherwise.