useNetwork

Reactive network status tracking. Provides online/offline state via navigator.onLine and detailed connection metadata via the Network Information API as Observables.

Demo

Network Status

Online

Real-time network connection information.

Network Information API is not supported in this browser.

Usage

Hook

import { useNetwork } from "@usels/web";

function Component() {
  const { isOnline$ } = useNetwork();

  return <div>{isOnline$.get() ? "Online" : "Offline"}</div>;
}

Scope

import { createNetwork } from "@usels/web";

function Component() {
  "use scope"
  const { isOnline$ } = createNetwork();

  return <div>{isOnline$.get() ? "Online" : "Offline"}</div>;
}

Basic usage

Check whether the browser is currently online or offline with isOnline$. The value updates automatically on online and offline window events.

// @noErrors
import { useNetwork } from "@usels/web";

function Component() {
  const { isOnline$, onlineAt$, offlineAt$ } = useNetwork();

  return (
    <div>
      <p>Status: {isOnline$.get() ? "Online" : "Offline"}</p>
      <p>Online since: {onlineAt$.get() ?? "—"}</p>
      <p>Offline since: {offlineAt$.get() ?? "—"}</p>
    </div>
  );
}

Connection details (Chromium only)

The Network Information API (navigator.connection) exposes detailed bandwidth and connection metadata. Check isSupported$ before relying on these values — they are undefined in unsupported browsers.

// @noErrors
import { useNetwork } from "@usels/web";

function Component() {
  const { isSupported$, downlink$, effectiveType$, rtt$, type$, saveData$ } = useNetwork();

  if (!isSupported$.get()) {
    return <p>Network Information API is not supported.</p>;
  }

  return (
    <div>
      <p>Type: {type$.get()}</p>
      <p>Effective type: {effectiveType$.get()}</p>
      <p>Downlink: {downlink$.get()} Mbps</p>
      <p>RTT: {rtt$.get()} ms</p>
      <p>Save data: {saveData$.get() ? "Yes" : "No"}</p>
    </div>
  );
}

Online/offline event handling

Use onChange on isOnline$ to react whenever the network status changes.

// @noErrors
import { useMount } from "@usels/core";
import { useNetwork } from "@usels/web";

function Component() {
  const { isOnline$ } = useNetwork();

  useMount(() => {
    return isOnline$.onChange(({ value }) => {
      console.log("Network status changed:", value ? "online" : "offline");
    });
  });

  return <div>{isOnline$.get() ? "Online" : "Offline"}</div>;
}

Type

Parameters

Parameter	Type	Description
_options	UseNetworkOptions (optional)	-

UseNetworkOptions

Option	Type	Default	Description
window	WindowSource	-	-

Returns

UseNetworkReturn

Name	Type	Description
isOnline$	ReadonlyObservable<boolean>	Whether the browser is online
offlineAt$	ReadonlyObservable<number | undefined>	Timestamp of last offline transition
onlineAt$	ReadonlyObservable<number | undefined>	Timestamp of last online transition
downlink$	ReadonlyObservable<number | undefined>	Downlink speed in Mbps
downlinkMax$	ReadonlyObservable<number | undefined>	Max reachable downlink speed in Mbps
effectiveType$	ReadonlyObservable<NetworkEffectiveType | undefined>	Effective connection type
rtt$	ReadonlyObservable<number | undefined>	Estimated round-trip time in ms
saveData$	ReadonlyObservable<boolean | undefined>	Whether data-saver mode is active
type$	ReadonlyObservable<NetworkType>	Connection type
isSupported$	ReadonlyObservable<boolean>	-

Source

View on GitHub