🪝 react-use-online-status

A lightweight, dependency-free React hook to detect the user's internet connection status (online/offline) in real time.

🌍 Overview

react-use-online-status is a small custom React Hook that leverages the browser's navigator.onLine API and the online / offline events to track connectivity changes. Use it to:

• Show offline banners or messages when the internet is lost
• Disable API calls when offline
• Improve UX in PWAs (Progressive Web Apps)
• Monitor real-time network connectivity

🚀 Installation

Install with npm or yarn:

npm install react-use-online-status
# or
yarn add react-use-online-status

💻 Usage

import React from "react";
import useOnlineStatus from "react-use-online-status";

function App() {
  const isOnline = useOnlineStatus();

  return (
    <div style={{ textAlign: "center", marginTop: "2rem" }}>
      <h1>🌐 Internet Connectivity Status</h1>
      {isOnline ? (
        <p style={{ color: "green", fontSize: "1.2rem" }}>✅ You are Online</p>
      ) : (
        <p style={{ color: "red", fontSize: "1.2rem" }}>❌ You are Offline</p>
      )}
    </div>
  );
}

export default App;

⚙️ How it works

The hook:

• Checks initial network status using navigator.onLine
• Listens for browser events:
  • online — fired when connection is restored
  • offline — fired when connection is lost
• Updates state immediately so your UI can respond dynamically

🧩 API Reference

useOnlineStatus()

Returns:

• boolean — true if online, false if offline

Example:

const isOnline = useOnlineStatus();

✨ Features

• ✅ Lightweight — zero dependencies
• ✅ Works with modern browsers
• ✅ Real-time updates
• ✅ Ideal for PWAs and offline-first apps
• ✅ Easy to integrate with banners, alerts, and modals

🧠 Example Use Cases

• Show “You’re offline” banners in e-commerce or dashboard apps
• Pause background API polling when offline
• Track users’ connectivity analytics
• Combine with Service Workers for advanced offline support