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.

TypeScript
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#

TypeScript
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#

FieldTypeDescription
isConnectedbooleannavigator.onLine.
typeConnectionTypeNetwork Information API type where available, else 'unknown'.
isInternetReachableboolean | nullAlways null on the web — the platform cannot know.
effectiveType'slow-2g' | '2g' | '3g' | '4g' | undefinedWeb-only extra; undefined where the API is missing.
downlinknumber | undefinedWeb-only extra.
saveDataboolean | undefinedWeb-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.onLineisConnected 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#