useNetworkInformation

sensors

Installation

npx usehooks-cli@latest add use-network-information

Description

A React hook that provides access to network connection information using the Network Information API. It tracks connection details like speed, type, and online status with real-time updates.

Return Type

UseNetworkInformationReturn

Property	Type	Description
networkInfo	NetworkInformation \| null	Current network connection information including downlink, effectiveType, rtt, saveData, and type
isOnline	boolean	Whether the browser is currently online
isSupported	boolean	Whether the Network Information API is supported in the current browser
refresh	() => void	Function to manually refresh the network information

Examples

Basic Network Status

Display current network connection information

import { useNetworkInformation } from '@usehooks.io/use-network-information';

function NetworkStatus() {
  const { networkInfo, isOnline, isSupported, refresh } = useNetworkInformation();

  if (!isSupported) {
    return <div>Network Information API not supported</div>;
  }

  return (
    <div>
      <h3>Network Status</h3>
      <p>Online: {isOnline ? 'Yes' : 'No'}</p>
      
      {networkInfo && (
        <div>
          <p>Connection Type: {networkInfo.type || 'Unknown'}</p>
          <p>Effective Type: {networkInfo.effectiveType || 'Unknown'}</p>
          <p>Downlink: {networkInfo.downlink ? `${networkInfo.downlink} Mbps` : 'Unknown'}</p>
          <p>RTT: {networkInfo.rtt ? `${networkInfo.rtt} ms` : 'Unknown'}</p>
          <p>Save Data: {networkInfo.saveData ? 'Enabled' : 'Disabled'}</p>
        </div>
      )}
      
      <button onClick={refresh}>Refresh Network Info</button>
    </div>
  );
}

Adaptive Content Loading

Adjust content quality based on connection speed

import { useNetworkInformation } from '@usehooks.io/use-network-information';
import { useState, useEffect } from 'react';

function AdaptiveContent() {
  const { networkInfo, isOnline } = useNetworkInformation();
  const [imageQuality, setImageQuality] = useState('high');

  useEffect(() => {
    if (!networkInfo) return;

    // Adjust quality based on effective connection type
    switch (networkInfo.effectiveType) {
      case 'slow-2g':
      case '2g':
        setImageQuality('low');
        break;
      case '3g':
        setImageQuality('medium');
        break;
      case '4g':
      default:
        setImageQuality('high');
        break;
    }
  }, [networkInfo]);

  if (!isOnline) {
    return <div>You are offline. Please check your connection.</div>;
  }

  return (
    <div>
      <h3>Adaptive Image Gallery</h3>
      <p>Loading {imageQuality} quality images</p>
      <p>Connection: {networkInfo?.effectiveType || 'Unknown'}</p>
      
      <div className="image-gallery">
        <img 
          src={`/api/image?quality=${imageQuality}`} 
          alt="Adaptive content"
          loading="lazy"
        />
        {/* More adaptive content */}
      </div>
    </div>
  );
}

Data Saver Mode

Respect user's data saving preferences

import { useNetworkInformation } from '@usehooks.io/use-network-information';
import { useState } from 'react';

function DataSaverContent() {
  const { networkInfo, isSupported } = useNetworkInformation();
  const [showFullContent, setShowFullContent] = useState(false);

  const isDataSaverEnabled = networkInfo?.saveData;
  const isSlowConnection = ['slow-2g', '2g'].includes(networkInfo?.effectiveType || '');

  const shouldLimitContent = isDataSaverEnabled || isSlowConnection;

  if (!isSupported) {
    return <div>Loading full content...</div>;
  }

  return (
    <div>
      <h3>Article Content</h3>
      
      {isDataSaverEnabled && (
        <div className="data-saver-notice">
          📱 Data Saver mode detected - showing optimized content
        </div>
      )}
      
      {isSlowConnection && (
        <div className="slow-connection-notice">
          🐌 Slow connection detected - content optimized for speed
        </div>
      )}
      
      <div className="article-preview">
        <p>Article preview content...</p>
      </div>
      
      {shouldLimitContent && !showFullContent ? (
        <button onClick={() => setShowFullContent(true)}>
          Load Full Content
        </button>
      ) : (
        <div className="full-content">
          <p>Full article content with images and videos...</p>
          <video controls={!isDataSaverEnabled}>
            <source src="/video.mp4" type="video/mp4" />
          </video>
        </div>
      )}
    </div>
  );
}

Dependencies

react

Notes

•The Network Information API is experimental and may not be supported in all browsers
•Automatically listens for online/offline events and connection changes
•Returns null for networkInfo when the API is not supported
•Cleans up event listeners on component unmount
•HTTPS required in production environments for security
•Effective connection types: 'slow-2g', '2g', '3g', '4g'
•Connection types include: 'bluetooth', 'cellular', 'ethernet', 'none', 'wifi', 'wimax', 'other', 'unknown'

Implementation

'use client';

import { useState, useEffect, useCallback } from "react";

interface NetworkInformation {
  downlink?: number;
  downlinkMax?: number;
  effectiveType?: "2g" | "3g" | "4g" | "slow-2g";
  rtt?: number;
  saveData?: boolean;
  type?:
    | "bluetooth"
    | "cellular"
    | "ethernet"
    | "none"
    | "wifi"
    | "wimax"
    | "other"
    | "unknown";
}

interface UseNetworkInformationReturn {
  networkInfo: NetworkInformation | null;
  isOnline: boolean;
  isSupported: boolean;
  refresh: () => void;
}

export const useNetworkInformation = (): UseNetworkInformationReturn => {
  const [networkInfo, setNetworkInfo] = useState<NetworkInformation | null>(
    null
  );
  const [isOnline, setIsOnline] = useState<boolean>(
    typeof navigator !== "undefined" ? navigator.onLine : true
  );

  const isSupported =
    typeof navigator !== "undefined" &&
    "connection" in navigator &&
    navigator.connection !== undefined;

  const updateNetworkInfo = useCallback(() => {
    if (!isSupported) return;

    const connection = (navigator as any).connection;

    setNetworkInfo({
      downlink: connection.downlink,
      downlinkMax: connection.downlinkMax,
      effectiveType: connection.effectiveType,
      rtt: connection.rtt,
      saveData: connection.saveData,
      type: connection.type,
    });
  }, [isSupported]);

  const handleOnlineStatusChange = useCallback(() => {
    setIsOnline(navigator.onLine);
  }, []);

  const handleConnectionChange = useCallback(() => {
    updateNetworkInfo();
  }, [updateNetworkInfo]);

  useEffect(() => {
    if (typeof window === "undefined") return;

    // Initial network info
    updateNetworkInfo();

    // Listen for online/offline events
    window.addEventListener("online", handleOnlineStatusChange);
    window.addEventListener("offline", handleOnlineStatusChange);

    // Listen for connection changes
    if (isSupported) {
      const connection = (navigator as any).connection;
      connection.addEventListener("change", handleConnectionChange);
    }

    return () => {
      window.removeEventListener("online", handleOnlineStatusChange);
      window.removeEventListener("offline", handleOnlineStatusChange);

      if (isSupported) {
        const connection = (navigator as any).connection;
        connection.removeEventListener("change", handleConnectionChange);
      }
    };
  }, [
    isSupported,
    updateNetworkInfo,
    handleOnlineStatusChange,
    handleConnectionChange,
  ]);

  return {
    networkInfo,
    isOnline,
    isSupported,
    refresh: updateNetworkInfo,
  };
};

export default useNetworkInformation;

useMediaSession

CLI Docs All Hooks

useUserMedia