@resilient

useNetworkStatus

Subscribe to real-time network status changes including connection type, speed, and online/offline state.

Live Demo

Status

Online

Connection

Unknown

Downlink

N/A

RTT

N/A

Try throttling your network in DevTools to see the values change in real-time.

Installation

npm install react-resilient-hooks

Usage

import { useNetworkStatus } from 'react-resilient-hooks';

function MyComponent() {
  const { data: network } = useNetworkStatus();

  if (!network?.online) {
    return <div>You are offline</div>;
  }

  return (
    <div>
      <p>Connection: {network.effectiveType}</p>
      <p>Speed: {network.downlink} Mbps</p>
      <p>Latency: {network.rtt}ms</p>
    </div>
  );
}

API

Returns

dataNetworkStatus | undefined

Current network status information.

NetworkStatus Properties

onlineboolean

Whether the browser is currently online.

effectiveType'slow-2g' | '2g' | '3g' | '4g'

Effective connection type based on measured network performance.

downlinknumber

Estimated downlink speed in Mbps.

rttnumber

Estimated round-trip time in milliseconds.

saveDataboolean

Whether the user has enabled data saver mode.

Browser Support

The Network Information API is currently only supported in Chromium-based browsers (Chrome, Edge, Opera). In unsupported browsers, effectiveType, downlink, and rtt will be undefined, but online will still work correctly.