useNetworkInformation

npm install rooks

import { useNetworkInformation } from "rooks";
 
function NetworkStatus() {
  const {
    effectiveType,
    downlink,
    rtt,
    saveData,
    type,
    isSupported
  } = useNetworkInformation();
 
  if (!isSupported) {
    return <div>Network Information API not supported</div>;
  }
 
  return (
    <div>
      <h2>Network Status</h2>
      <p>Connection Type: {type || "Unknown"}</p>
      <p>Effective Type: {effectiveType || "Unknown"}</p>
      {downlink && <p>Download Speed: {downlink} Mbps</p>}
      {rtt && <p>Round Trip Time: {rtt} ms</p>}
      {saveData && <p>⚠️ Data Saver Mode: Enabled</p>}
    </div>
  );
}

function AdaptiveImage() {
  const { effectiveType, saveData } = useNetworkInformation();
 
  const shouldLoadHighQuality =
    !saveData && (effectiveType === "4g" || effectiveType === "3g");
 
  return (
    <img
      src={shouldLoadHighQuality ? "/image-hq.jpg" : "/image-lq.jpg"}
      alt="Adaptive quality image"
    />
  );
}

function VideoPlayer() {
  const { saveData, effectiveType } = useNetworkInformation();
 
  if (saveData) {
    return (
      <div>
        <p>Data Saver mode is enabled. Video quality will be reduced.</p>
        <button>Play anyway</button>
      </div>
    );
  }
 
  return <video src="/video.mp4" controls autoPlay={effectiveType === "4g"} />;
}

function NetworkAwareApp() {
  const { effectiveType, downlink } = useNetworkInformation();
 
  const features = {
    autoplay: effectiveType === "4g",
    preload: downlink && downlink > 5,
    highQualityImages: effectiveType === "4g" || effectiveType === "3g",
  };
 
  return (
    <div>
      <p>Autoplay: {features.autoplay ? "Enabled" : "Disabled"}</p>
      <p>Preload: {features.preload ? "Enabled" : "Disabled"}</p>
      <p>Image Quality: {features.highQualityImages ? "High" : "Low"}</p>
    </div>
  );
}