useNetwork

Hook to detect network connection infos. It takes optinally a parameter selectedInfo to specify a subset of connection status property.

See: Network Information API.

Demo

INFO

The component display the network connection informations. Try to change connection type from console to see changes.

Loading demo…

Show source code

import { useNetwork } from "../../../../hooks/events/useNetwork"

export const UseNetwork = () => {
	const connectionState = useNetwork();

	return (<div style={{ textAlign: "center" }}>
		{
			Object.keys(connectionState).map(el => (
				<p key={el}>{el}: {JSON.stringify(connectionState[el as keyof typeof connectionState])}</p>
			))
		}
	</div>)
}

Types

UseNetworkProps

Parameters accepted by useNetwork when called without selectedInfo. The hook returns the full {@link ConnectionState} object and re-renders on any network property change.

Property	Type	Required	Description
selectedInfo	undefined

UseNetworkSelectedProps

• @template T - A non-empty subset of {@link ConnectionState} property keys to subscribe to.

Parameters accepted by useNetwork when called with a selectedInfo array. The hook returns only the requested subset of {@link ConnectionState} properties, avoiding re-renders when unrelated network properties change.

Property	Type	Required	Description
selectedInfo	ArrayMinLength1<T>	✓	A non-empty array of {@link ConnectionState} property keys to selectively subscribe to (e.g. ["isOnline", "effectiveType"]). The hook returns an object containing only these keys, preventing unnecessary re-renders when other network properties change. Must contain at least one element — use the unparameterised overload instead if you need the full state.

UseNetworkResult

Return value of useNetwork when called without selectedInfo. The full reactive {@link ConnectionState} snapshot. See {@link ConnectionState} for a description of each property.

export type UseNetworkResult = ConnectionState;

UseNetworkSelectedResult

• @template T - The subset of {@link ConnectionState} keys that were requested.

Return value of useNetwork when called with a selectedInfo array. A partial reactive snapshot containing only the requested {@link ConnectionState} keys. See {@link ConnectionState} for a description of each property.

export type UseNetworkSelectedResult<T extends keyof ConnectionState> = {
	[K in T]: ConnectionState[K];
};