useOnlineStatus

useOnlineStatus

Tracks the browser's active network connection status dynamically. Updates in real-time if the user's internet connection drops or restores.

Usage Examples

Basic (Minimum Parameters)

The simplest possible implementation.

import { useOnlineStatus } from 'react-hook-lab';

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

  return (
    <div style={{ color: isOnline ? 'green' : 'red' }}>
      {isOnline ? "🟢 Online" : "🔴 Offline"}
    </div>
  );
}

Common (Standard Usage)

Disabling functionality (like a "Save" button) when the user goes offline to prevent data loss.

import { useOnlineStatus } from 'react-hook-lab';

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

  const handleSave = () => {
    // Simulate save
  };

  return (
    <form>
      <textarea placeholder="Write your notes here..." />
      <br/>
      <button onClick={handleSave} disabled={!isOnline}>
        {isOnline ? "Save to Cloud" : "Reconnecting to internet..."}
      </button>
    </form>
  );
}

Advanced (All Parameters)

An exhaustive example demonstrating how to trigger side effects (like showing a toast notification) only when the status changes.

import { useOnlineStatus } from 'react-hook-lab';
import { useEffect, useRef } from 'react';

function ConnectionWatcher() {
  const isOnline = useOnlineStatus();
  const prevStatus = useRef(isOnline);

  useEffect(() => {
    if (prevStatus.current && !isOnline) {
      console.warn("WARNING: Connection lost! Retrying...");
    } else if (!prevStatus.current && isOnline) {
      console.log("SUCCESS: Connection restored!");
    }
    prevStatus.current = isOnline;
  }, [isOnline]);

  return <div>Watch the console for connection events.</div>;
}

API Reference

Parameters

This hook takes absolutely zero parameters.

Return Object

Returns boolean:

• true if the browser is currently connected to the network.
• false if the browser is completely offline. Note that during Server-Side Rendering (SSR) environments, this value strictly defaults to true.