useNetworkState
Monitor and adapt to network conditions seamlessly with useNetworkState.
Install:
npm i @uidotdev/usehooks
Description:
The useNetworkState React hook delivers real-time insights about the network status in your application, helping to adapt app behavior to varying connectivity conditions. It offers up-to-date snapshots of the network state, such as online/offline status, connection speed, and type. Through its use, you can respond effectively to network changes, fostering a seamless user experience even under unstable or varying connectivity. Please note, this hook is intended for client-side use only.
Return Value
The useNetworkState hook returns an object representing the current network state with the following properties:
| Name | Type | Description |
|---|---|---|
| online | boolean | Indicates whether the browser is online or offline. |
| downlink | number | The effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds. |
| downlinkMax | number | The maximum downlink speed, in megabits per second (Mbps), for the underlying connection technology. |
| effectiveType | string | The effective type of the connection for general web browsing purposes (either ‘slow-2g’, ‘2g’, ‘3g’, or ‘4g’). |
| rtt | number | The estimated round-trip latency of the connection, in milliseconds. |
| saveData | boolean | Whether the user has requested a reduced data usage mode from the user agent. |
| type | string | The type of connection a device is using to communicate with the network. It could be one of the following values: ‘bluetooth’, ‘cellular’, ‘ethernet’, ‘none’, ‘wifi’, ‘wimax’, ‘other’, ‘unknown’. |
Demo:
Example:
import * as React from "react";
import { useNetworkState } from "@uidotdev/usehooks";
export default function App() {
const network = useNetworkState();
return (
<section>
<h1>useNetworkState</h1>
<table>
<tbody>
{Object.keys(network).map((key) => {
return (
<tr key={key} className={key}>
<th>{key}</th>
<td>{`${network[key]}`}</td>
</tr>
);
})}
</tbody>
</table>
</section>
);
}