add network information context, provider, and hook

Author: myty

src/hooks/use-network-information.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { NetworkInformationContext } from "../providers/network-information/network-information-context";
+
+export default function useNetworkInformation() {
+    const state = useContext(NetworkInformationContext);
+
+    return state;
+}

src/providers/network-information/network-information-context.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+export interface NetworkInformation {
+    isOnline: boolean;
+}
+
+export const NetworkInformationContext = React.createContext<
+    NetworkInformation
+>({
+    isOnline: true,
+});

src/providers/network-information/network-information-provider.tsx

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+    NetworkInformation,
+    NetworkInformationContext,
+} from "./network-information-context";
+
+const NetworkInformationProvider: React.FC = ({ children }) => {
+    const [state, setState] = useState<NetworkInformation>();
+
+    const loadNetworkInformation = useCallback(() => {
+        const { onLine: isOnline } = window.navigator;
+
+        setState((prev) => ({
+            ...prev,
+            isOnline,
+        }));
+    }, []);
+
+    useEffect(() => {
+        const { connection } = window.navigator as any;
+
+        connection?.addEventListener("change", loadNetworkInformation);
+
+        loadNetworkInformation();
+
+        return () => {
+            connection?.removeEventListener("change", loadNetworkInformation);
+        };
+    }, [loadNetworkInformation]);
+
+    return (
+        <NetworkInformationContext.Provider value={state}>
+            {children}
+        </NetworkInformationContext.Provider>
+    );
+};
+
+export default NetworkInformationProvider;