[IMPL] useNetwork hook

Author: nDriaDev

apps/react-tools-demo/src/markdown/useStateGetReset.md

@@ -23,6 +23,12 @@ const UseStateGetReset = () => {
 		});
 	}, [state, setState])
 
+	const fullState = useMemo(() => {
+		console.log("fullState")
+		const state = getState();
+		return <p>{state.id} - {state.name} - {state.eta}</p>
+	}, [getState])
+
 	return (
 		<div style={{ display: "grid", gridTemplateColumns: "auto auto", justifyContent: "center", gap: 50 }}>
 			<div>
@@ -42,6 +48,7 @@ const UseStateGetReset = () => {
 					<Input id="eta" name="eta" value={state.eta} onChange={onChange} />
 				</div>
 			</div>
+			{fullState}
 		</div>
 	);
 };

packages/react-tools/README.md

@@ -47,7 +47,7 @@
 	- [x] useHover
 	- [x] useResponsive
 	- [x] useClickOutside
-	- [ ] useNetwork
+	- [-] useNetwork
 	- [ ] useOnline
 	- [ ] useSize (=useMeasuree?)
 	- [ ] useScrollIntoView

packages/react-tools/src/hooks/useEventListener.ts

@@ -12,7 +12,6 @@ import { useMemoizedFunction } from ".";
  */
 export const useEventListener = ({ type, listener, element = window, listenerOpts }: { type: string, listener: (evt: Event | CustomEvent) => void, element?: RefObject<HTMLElement> | Window, listenerOpts?: boolean | AddEventListenerOptions}) => {
 	const optsMemoized = useRef<typeof listenerOpts>(listenerOpts);
-	const listenerMemoized = useMemoizedFunction(listener);
 	const elementReference = useRef<HTMLElement | Window | null>();
 
 	useEffect(() => {
@@ -23,14 +22,14 @@ export const useEventListener = ({ type, listener, element = window, listenerOpt
 				: null
 			: element as Window
 
-		elementReference.current && (elementReference.current as HTMLElement | Window).addEventListener(type, listenerMemoized, opts);
+		elementReference.current && (elementReference.current as HTMLElement | Window).addEventListener(type, listener, opts);
 		return () => {
-			elementReference.current && (elementReference.current as HTMLElement | Window).removeEventListener(type, listenerMemoized, opts);
+			elementReference.current && (elementReference.current as HTMLElement | Window).removeEventListener(type, listener, opts);
 		}
-	}, [element, type, listenerMemoized]);
+	}, [element, type, listener]);
 
 	const remove = useMemoizedFunction(() => {
-		elementReference.current && (elementReference.current as HTMLElement | Window).removeEventListener(type, listenerMemoized, optsMemoized.current);
+		elementReference.current && (elementReference.current as HTMLElement | Window).removeEventListener(type, listener, optsMemoized.current);
 	});
 
 	return remove;

packages/react-tools/src/hooks/useNetwork.ts

@@ -0,0 +1,37 @@
+import { useCallback, useMemo } from "react";
+import { useSyncExternalStore } from "."
+
+const listeners = new Set<() => void>();
+const handler = () => listeners.forEach(l => l());
+
+const getConnetionState = () => {
+	const connection = Reflect.get(navigator, "connection");
+	let obj = { online: navigator.onLine };
+	if (connection) {
+		obj.isSupported = true;
+		obj.downlink = connection.downlink as number;
+		obj.downlinkMax = connection.downlinkMax as number;
+		obj.effectiveType = connection.effectiveType as "slow-2g" | "2g" | "3g" | "4g";
+		obj.rtt = connection.rtt as number;
+		obj.saveData = connection.saveData as boolean;
+		obj.type = connection.type as "bluetooth" | "cellular" | "ethernet" | "none" | "wifi" | "wimax" | "other" | "unknown";
+	} else {
+		obj.isSupported = false;
+		obj.downlink = null;
+		obj.downlinkMax = null;
+		obj.effectiveType = null;
+		obj.rtt = null;
+		obj.saveData = null;
+		obj.type = null;
+	}
+}
+export const useNetwork = () => {
+	return useSyncExternalStore(
+		useCallback(notif => {
+
+		}, []),
+		useMemo(() => {
+			let prevState = getConnetionState();
+		}, [])
+	);
+}