reactuals/dist/hooks/useNetworkSpeed.js

A useful package providing a collection of 50+ React hooks and utilities to simplify React development.

import { useState, useEffect } from "react";
export function useNetworkSpeed() {
    const [networkSpeed, setNetworkSpeed] = useState({
        effectiveType: null,
        downlinkMbps: null,
    });
    useEffect(() => {
        const updateNetworkInfo = () => {
            const connection = navigator.connection ||
                navigator.mozConnection ||
                navigator.webkitConnection;
            if (connection) {
                setNetworkSpeed({
                    effectiveType: connection.effectiveType || null,
                    downlinkMbps: connection.downlink || null,
                });
            }
        };
        updateNetworkInfo();
        if (navigator.connection) {
            navigator.connection.addEventListener("change", updateNetworkInfo);
            return () => navigator.connection.removeEventListener("change", updateNetworkInfo);
        }
    }, []);
    return networkSpeed;
}