useOffline

A hook that detects whether the user’s device is currently offline. Perfect for implementing offline-first functionality, network status indicators, and graceful degradation.

Parameters

This hook doesn’t take any parameters.

Returns

boolean - True if the device is offline, false if online

Usage


import { useOffline } from '@rhinolabs/react-hooks';
 
function NetworkAwareComponent() {
  const isOffline = useOffline();
 
  return (
    <div>
      <div className={`status-indicator ${isOffline ? 'offline' : 'online'}`} />
      
      {isOffline ? (
        <div className="offline-message">
          <h2>You're Offline</h2>
          <p>Some features may be unavailable</p>
        </div>
      ) : (
        <div className="content">
          {/* Your online content here */}
        </div>
      )}
    </div>
  );
}

Notes

Uses browser online/offline events
Real-time status updates
Automatic event cleanup
Type-safe boolean return
Handles connection changes
Efficient state management
No polling required
Cross-browser support