-
-
Save shuvo-me/c357353b67584ae5bebac5237a90c066 to your computer and use it in GitHub Desktop.
A React Typescript hook to get real-time network insights
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect, useState } from "react"; | |
interface NetworkInformation extends EventTarget { | |
downlink?: number; | |
effectiveType?: "slow-2g" | "2g" | "3g" | "4g"; | |
rtt?: number; | |
saveData?: boolean; | |
onchange?: EventListener; | |
} | |
interface NavigatorWithNetworkInformation extends Navigator { | |
connection?: NetworkInformation; | |
} | |
interface NetworkState { | |
downlink?: number | null; | |
effectiveType?: "slow-2g" | "2g" | "3g" | "4g" | null; | |
rtt?: number | null; | |
saveData?: boolean | null; | |
isOnline: boolean; | |
} | |
function useNetwork(): NetworkState { | |
const [networkState, setNetworkState] = useState<NetworkState>({ | |
downlink: null, | |
effectiveType: null, | |
rtt: null, | |
saveData: null, | |
isOnline: false, // Default to false, updated correctly on the client side | |
}); | |
useEffect(() => { | |
// Ensure we are in the browser environment | |
if (typeof window === "undefined") { | |
return; | |
} | |
const nav = navigator as NavigatorWithNetworkInformation; | |
if (!nav.connection) { | |
setNetworkState((prevState) => ({ | |
...prevState, | |
downlink: null, | |
effectiveType: null, | |
rtt: null, | |
saveData: null, | |
isOnline: navigator.onLine, // Update online status in the browser | |
})); | |
return; | |
} | |
const updateNetworkInfo = () => { | |
const { downlink, effectiveType, rtt, saveData } = nav.connection!; | |
setNetworkState((prevState) => ({ | |
...prevState, | |
downlink, | |
effectiveType, | |
rtt, | |
saveData, | |
isOnline: navigator.onLine, | |
})); | |
}; | |
updateNetworkInfo(); | |
nav.connection!.addEventListener("change", updateNetworkInfo); | |
window.addEventListener("online", () => | |
setNetworkState((prevState) => ({ ...prevState, isOnline: true })), | |
); | |
window.addEventListener("offline", () => | |
setNetworkState((prevState) => ({ ...prevState, isOnline: false })), | |
); | |
return () => { | |
if (nav.connection) { | |
nav.connection.removeEventListener("change", updateNetworkInfo); | |
} | |
window.removeEventListener("online", () => | |
setNetworkState((prevState) => ({ ...prevState, isOnline: true })), | |
); | |
window.removeEventListener("offline", () => | |
setNetworkState((prevState) => ({ ...prevState, isOnline: false })), | |
); | |
}; | |
}, []); | |
return networkState; | |
} | |
export default useNetwork; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment