- Published on
useNetworkState Hook React
![useNetworkState Hook React](https://user-images.githubusercontent.com/33494971/269602373-9aa20fcb-72ca-49ca-902c-e5866a74bf0e.png)
useNetworkState Hook React
useNetworkState Code and Usage
useNetworkState is a hook to track the status of the user's network connection.
import { useState, useEffect } from "react";
const useNetworkState = () => {
const [networkState, setNetworkState] = useState(navigator.onLine);
const handleOnline = () => {
setNetworkState(true);
};
const handleOffline = () => {
setNetworkState(false);
};
useEffect(() => {
window.addEventListener("online", handleOnline);
window.addEventListener("offline", handleOffline);
return () => {
window.removeEventListener("online", handleOnline);
window.removeEventListener("offline", handleOffline);
};
}, []);
return networkState;
};
// Usage
const NetworkStateExample = () => {
const isOnline = useNetworkState();
return (
<div>{isOnline ? <p>You are online.</p> : <p>You are offline.</p>}</div>
);
};