Skip to content

Show offline banner when internet disconnects 📶 #481

Description

@anoopcodehack

Show offline banner when internet disconnects 📶

File: client/src/App.jsx

App has online/offline indicator in navbar 💀
But no full banner warning when offline fr!!

Fix: add global offline banner in App.jsx:
const [isOnline, setIsOnline] = useState(navigator.onLine)

useEffect(() => {
window.addEventListener('online', () => setIsOnline(true))
window.addEventListener('offline', () => setIsOnline(false))
}, [])

{!isOnline && (

📶 You're offline — changes won't be saved until you reconnect!
)}

~10 lines! App.jsx is clean new file 🎯
No backend needed!!

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions