the-react-hooks
HooksuseNetworkQuality

useNetworkQuality()

The useNetworkQuality() hook tracks the user's connection status, providing real-time updates on effective network type, downlink speed, and RTT latency.

Import

typescript
import { useNetworkQuality } from 'the-react-hooks';

Usage

Connection Status
Online
TypeUNKNOWN
Downlink0 Mbps
RTT0 ms
Component.tsx
import { useNetworkQuality } from 'the-react-hooks';

export const Component = () => {
  const { online, downlink, rtt } = useNetworkQuality();

  return (
    <div>
      <p>Online: {online ? 'Yes' : 'No'}</p>
      <p>Speed: {downlink} Mbps</p>
      <p>Latency: {rtt} ms</p>
    </div>
  );
}

API

Arguments

This hook does not accept any arguments.

Returns

Returns an object with the following properties:
  • online – boolean True if the user is connected to the internet.
  • effectiveType – string Connection type (e.g., '4g', '3g', '2g', 'slow-2g').
  • downlink – number Effective bandwidth estimate in Mbps.
  • rtt – number Estimated round-trip time (ping) in milliseconds.
  • saveData – boolean True if the user has requested reduced data usage.
PrevioususeMousePositionNextuseOnClickOutside