📶 use-online-status-hook

A simple, lightweight React custom hook that tracks the browser's online/offline status in real time.
Useful for displaying internet connectivity alerts in your apps.

---

📦 Installation

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



🚀 Usage

import useOnlineStatus from "use-online-status-hook";

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

  return (
    <div>
      {isOnline ? "✅ You are online!" : "❌ You are offline!"}
    </div>
  );
}


✨ Features:

✅ Detects internet connectivity in real time

⚡ Automatically updates status on browser online/offline events

🔁 Cleans up event listeners on unmount

🧠 Uses native navigator.onLine API

🔧 How It Works:

Uses navigator.onLine to get the initial status

Adds event listeners for online and offline events

Returns a boolean value: true if online, false if offline

📦 Benefits:

- 🧩 Super lightweight and zero dependencies
- ⚙️ Plug-and-play: just install and use the hook
- 🧘‍♂️ Handles online/offline detection logic for you
- 🔒 Helps you prevent failed API calls due to connectivity loss
- 🛡 Improve UX by showing smart alerts or disabling features when offline
- 🌐 Works across all modern browsers (Chrome, Firefox, Edge, etc.)

📄 License
ISC

🙋‍♂️ Author
Made with ❤️ by Prashanth H T

💡 Tip
You can use this hook to disable API calls or show alerts when the internet connection is lost.