Have you ever wanted to notify users when they lose internet connectivity in your React app?

Today we build AppShell component together that monitors the browser's online/offline status and shows a user friendly message when the user goes offline.

Why?

  • Realtime apps (like chat, stock tickers, etc.) depend on live connectivity.
  • Offline-friendly experiences build trust and reliability.
  • It's surprisingly easy to implement.

The code

Image description

Lets Wrap the entire app (or any major layout component) with AppShell:

Image description

Behind the Scenes.

  • navigator.onLine: Detects the initial connection status.
  • window.addEventListener("online"/"offline"): Reacts to changes in network status.
  • useEffect: Registers and cleans up event listeners when the component mounts/unmounts.

Let me know how you're handling offline states in your apps :)