useNetworkInfo hook written in Typescript

useNetworkInfo.tsx

// adapted from here: https://googlechrome.github.io/samples/network-information/

import React from 'react';

type TNetworkInfo = {
	type: string;
	downlink: string;
	rtt: string;
	downlinkMax: string;
	effectiveType: string;
	saveData: string;
};
export default function useNetworkInfo(logToConsole = false): TNetworkInfo {
	const [networkInfo, setNetworkInfo] = React.useState<TNetworkInfo>({
		type: '',
		downlink: '',
		rtt: '',
		downlinkMax: '',
		effectiveType: '',
		saveData: '',
	});

	React.useEffect(() => {
		navigator['connection'].addEventListener('change', logNetworkInfo);

		function logNetworkInfo() {
			// Network type that browser uses

			console.log('         type: ' + navigator['connection'].type);

			// Effective bandwidth estimate
			console.log('     downlink: ' + navigator['connection'].downlink + ' Mb/s');

			// Effective round-trip time estimate
			console.log('          rtt: ' + navigator['connection'].rtt + ' ms');

			// Upper bound on the downlink speed of the first network hop
			console.log('  downlinkMax: ' + navigator['connection'].downlinkMax + ' Mb/s');

			// Effective connection type determined using a combination of recently
			// observed rtt and downlink values: ' +
			console.log('effectiveType: ' + navigator['connection'].effectiveType);

			// True if the user has requested a reduced data usage mode from the user
			// agent.
			console.log('     saveData: ' + navigator['connection'].saveData);

			console.log('');
		}

		logToConsole && logNetworkInfo();

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

	return networkInfo;
}

usage:

import React from 'react'
import useNetworkInfo from './useNetworkInfo'

export default function MyComponent() {
    const networkInfo = useNetworkInfo() // you can optionally pass in 'true' to log the info to the console

    return <div> {JSON.stringify(networkInfo)}</div>
}