Swr: Check user internet connection

[zahraHaghi]

I am using swr example with axios that use, useRequest hook. How can I show an alert when user not connected to internet!? When is offline

[huozhi]

@zahraHaghi browser support online/offline event, you can display the alert based on the "offline" event. https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events

[sergiodxa]

☝️ you can do it without involving SWR at all, as an example you could create your own hook to do it:

function useOnlineStatus() {
  const [status, setStatus] = React.useState<"online" | "offline">("online");

  React.useEffect(() => {
    function online() {
      setStatus("online");
    }

    function offline() {
      setStatus("offline");
    }

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

    return () => {
      window.removeEventListener("online", online);
      window.removeEventListener("offline", offline);
    };
  }, [setStatus]);

  return status;
}

And you can use it as:

const onlineStatus = useOnlineStatus()
if (onlineStatus === "offline") return (<OfflineBanner />)

[shuding]

Thank you @sergiodxa @huozhi for helping!