React.js: How to Notify Users of Changing Connection Status

#javascript #react #ux #webdev

We’ve all had been there; we’re watching a captivating video, or reading our favorite fan-fiction site; then, out of nowhere, one of the most frustrating things of modernity happens: our internet connection fails.

Sometimes, the only indication of this is a loading icon that won’t go away appears over a video. While browsing other sites, all site UI will disappear, and some UI with an error message, generated by the browser, will display.

It can be a nice touch to have your website itself notify the users of a disconnection or reconnection to the internet. Here’s a way you could accomplish that in a React.js application.

_To implement this functionality on all pages of your project, all of the following steps should be done inside the App.jsx or App.tsx file. The toast library is also used; to install that, run npm i react-hot-toast and make sure to import it into your App.jsx or App.tsx file.
_

1. Define isOnlinein state. Initialize to value of navigator.onLine , which is a boolean value that checks if an internet connection exists:

const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);

2. Create a useEffect, dependent on isOnline:

useEffect(() => {

}, [isOnline]);

3. Inside the useEffect, create function handleOnlineStatusChange:

const handleOnlineStatusChange = () => {
    setIsOnline(navigator.onLine);

    isOnline
      ? toast("You are offline", {
           style: {
            background: theme === "light" ? "#242424" : "rgb(233, 231, 228)",
            color: theme === "dark" ? "black" : "white",
            border: "2px solid red",
           },
        })
       : toast("Back online!", {
           style: {
            background: theme === "light" ? "#242424" : "rgb(233, 231, 228)",
            color: theme === "dark" ? "black" : "white",
            border: "2px solid green",
           },
        });
};

handleOnlineStatusChange sets isOnline to updated navigator.onLine, then, depending on the value of isOnline, triggers a toast, notifying user of connection status.

4. Below handleOnlineStatusChange & still inside useEffect, add, then clean up event listeners on window ‘s “online” and “offline” events. An anonymous function removing these event listeners is then returned from the useEffect:

window.addEventListener("online", handleOnlineStatusChange);
window.addEventListener("offline", handleOnlineStatusChange);

return () => {
  window.removeEventListener("online", handleOnlineStatusChange);
  window.removeEventListener("offline", handleOnlineStatusChange);
};

5. To test, go to your DevTools and, under something like “Network”, switch to “Offline”. It should look something like this: