useNetwork
Reactive network state on the cross-platform NetworkState contract, with web-only Network Information API extras riding along. Browser composable — import from @sigx/use-web.
import { effect } from 'sigx';
import { useNetwork } from '@sigx/use-web';
const network = useNetwork();
effect(() => console.log(network.isConnected, network.effectiveType));
The return is a ReactiveView<WebNetworkState> — read fields by property access, each tracked independently. Destructure with core's toSignals() to keep reactivity.
Signature
function useNetwork(options?: ConfigurableWindow): ReactiveView<WebNetworkState>;
interface WebNetworkState extends NetworkState {
effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';
downlink?: number;
saveData?: boolean;
}
Pass { window } to drive it from a mock — see Configurable*.
Returns
| Field | Type | Description |
|---|---|---|
isConnected | boolean | navigator.onLine. |
type | ConnectionType | Network Information API type where available, else 'unknown'. |
isInternetReachable | boolean | null | Always null on the web — the platform cannot know. |
effectiveType | 'slow-2g' | '2g' | '3g' | '4g' | undefined | Web-only extra; undefined where the API is missing. |
downlink | number | undefined | Web-only extra. |
saveData | boolean | undefined | Web-only extra. |
isConnected, type, and isInternetReachable are the cross-platform NetworkState contract — a field-for-field match with lynx-network's NetworkState, so connectivity code ports across targets. The web maps navigator.onLine → isConnected and reports isInternetReachable: null; Lynx fills that field from its native reachability API.
SSR
On the server the view reads { isConnected: true, type: 'unknown', isInternetReachable: null } (the extras are undefined), then reflects the real environment on mount.
See also
useOnline— the sugar form when you only needisConnected.useDocumentVisibility— pair with connectivity to pause work in the background.- Conventions → Cross-platform contracts — the
NetworkStateshape shared with Lynx.
