Network

Connection state, plus whatever the Network Information API will say about it. It renders nothing: the state is yours to render however this app already reports things.

Usage

import { useNetworkState } from "@enigmax/primitives/react";

export function ConnectionBanner() {
    const { online, recovered, slow } = useNetworkState();

    if (!online) return <Banner tone="error">You are offline. Changes are saved locally.</Banner>;
    if (recovered) return <Banner tone="success">Back online.</Banner>;
    if (slow) return <Banner tone="warning">Slow connection - images are held back.</Banner>;
    return null;
}

import { createNetworkMonitor } from "@enigmax/primitives";

const monitor = createNetworkMonitor();
monitor.subscribe((state) => {
    document.body.dataset.offline = state.online ? undefined : "";
});

Installation

recovered is the part worth having

“You are back online” has to know the connection had dropped. Every implementation of that ends up as a stray wasOffline boolean beside the effect, re-derived on every screen - and wrong on a page that loads while already offline, which announces a comeback that never happened. It is tracked in the monitor instead, and is false on a first load.

Three details the naive version misses

The Network Information API is still prefixed in some browsers and absent in Safari, so the connection object is looked up three ways and may be null throughout. Every field it would provide is nullable, and null means “not reported” rather than zero.

The change event fires for readings that did not change, so the snapshot is shallow-compared before any subscriber is told. Without that, every subscriber re-renders for nothing on a connection that merely re-measured itself.

A server render must report online. Assuming offline flashes a warning on every page before hydration corrects it.