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:

NameTypeDescription
onlinebooleanIndicates whether the browser is online or offline.
downlinknumberThe effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds.
downlinkMaxnumberThe maximum downlink speed, in megabits per second (Mbps), for the underlying connection technology.
effectiveTypestringThe effective type of the connection for general web browsing purposes (either ‘slow-2g’, ‘2g’, ‘3g’, or ‘4g’).
rttnumberThe estimated round-trip latency of the connection, in milliseconds.
saveDatabooleanWhether the user has requested a reduced data usage mode from the user agent.
typestringThe 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:

More Hooks:

Sort: