🚀 Detecting Online/ Offline Status in React 🌐
🤔 Have you ever wondered how to detect if a user goes offline or back online in your React app?
👉 The navigator.onLine property makes it super easy to do that!
💎 Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine
🔥 Here’s a custom React hook (useOnlineStatus) that you can freely use for your React project 🥰
import { useState, useEffect } from "react";
const useOnlineStatus = () => {
const [isOnline, setIsOnline] = useState(navigator.onLine);
useEffect(() => {
const updateStatus = () => setIsOnline(navigator.onLine);
window.addEventListener("online", updateStatus);
window.addEventListener("offline", updateStatus);
return () => {
window.removeEventListener("online", updateStatus);
window.removeEventListener("offline", updateStatus);
};
}, []);
return isOnline;
};
And this is how you can use it:
const OnlineStatus = () => {
const isOnline = useOnlineStatus();
return (
<div>
<h2>Status: {isOnline ? "🟢 Online" : "🔴 Offline"}</h2>
</div>
);
};
Follow me to stay updated with my future posts: