rc-online-status

A lightweight React Hook for effortlessly detecting online/offline network status. Stay connected and informed!

Features

• Tiny Footprint: Minimal impact on your bundle size.
• Simple API: Easy to use and integrate into your React projects.
• Real-time Updates: Get instant notifications about network changes.
• TypeScript Support: Enjoy type safety and improved developer experience.

Installation

npm install rc-online-status
# or
yarn add rc-online-status

Usage

import { useOnlineStatus } from "rc-online-status";

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

  return <div>You are currently {isOnline ? "Online" : "Offline"}.</div>;
}

Example with Conditional Rendering

import { useOnlineStatus } from "rc-online-status";

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

  return (
    <div>
      {isOnline ? (
        <p>Syncing data...</p>
      ) : (
        <p>You are offline. Data will be synced when you reconnect.</p>
      )}
    </div>
  );
}

Handling Network Changes

The isOnline boolean value allows you to dynamically respond to network connectivity changes. Use it to:

• Display notifications: Inform users about their online/offline status.
• Toggle features: Enable/disable functionalities based on connectivity.
• Queue actions: Store data synchronization or other tasks for later execution when the network is restored.
• Improve UX: Provide a seamless experience even during network disruptions.

License MIT

Key improvements:

• Consistent code style: Corrected inconsistent use of single and double quotes in the code examples.
• Added downloads badge: Provides insight into the package's popularity.
• "Features" section: Replaces "Why rc-online-status?" with a more standard "Features" section.
• Enhanced "Handling Network Changes" section: Provides more specific and actionable suggestions for using the isOnline value.
• Removed unnecessary backticks: Removed the extra backticks around the code blocks, which were causing formatting issues.

This refined README is more concise, consistent, and provides clearer guidance on using the rc-online-status hook. Remember to update the version number and npm badge link when publishing a new version.