useNetwork

A custom React hook to monitor and access network-related information.
useNetwork(): {
  online: boolean;
  rtt?: number;
  downlink: number;
  downlinkMax?: number;
  effectiveType: string;
  saveData?: boolean;
  networkType?: string;
}
Parameters
  • Returns: An object containing various network attributes:
    • online: A boolean indicating whether the user is online.
    • rtt: Estimated round-trip time in milliseconds (if available).
    • downlink: Estimated download speed in Mbps.
    • downlinkMax: Maximum available download speed (if supported).
    • effectiveType: Effective connection type (e.g., '4g', '3g').
    • saveData: A boolean indicating if 'Data Saver' mode is enabled.
    • networkType: Type of connection (e.g., 'wifi', 'cellular').

Example

import { useNetwork } from "daily-toolset/hooks";

// Example usage
function NetworkInfo() {
  const {
    online,
    rtt,
    downlink,
    effectiveType,
    saveData,
    networkType,
  } = useNetwork();

  return (
    <div>
      <h1>Network Information</h1>
      <ul>
        <li>Status: {online ? "Online" : "Offline"}</li>
        <li>RTT: {rtt || "N/A"} ms</li>
        <li>Downlink: {downlink} Mbps</li>
        <li>Effective Type: {effectiveType}</li>
        <li>Data Saver Enabled: {saveData ? "Yes" : "No"}</li>
        <li>Network Type: {networkType || "Unknown"}</li>
      </ul>
    </div>
  );
}

Use Cases

  • Displaying real-time network information in web apps.
  • Adapting app behavior based on network speed or connection type.
  • Warning users about offline status or limited connectivity.