useNetworkStatus

Whether the browser is online, offline or without internet.

const { status, online, latency, lastChecked, connection, check } = useNetworkStatus({ probeUrl, interval, timeout, enabled })

Follows the browser's online and offline events and the Network Information API, and, with your probeUrl, really tries to reach the internet: a small HEAD request on start, when the browser comes back online, every interval ms and on check(). That is what tells "connected to Wi-Fi" from "has internet": status is online, offline, unreachable (a network without internet access, a captive portal) or checking.

Always give it your own `probeUrl`. It is required: use a health endpoint you own and control (it only needs to answer; the response is not read, so cross-origin endpoints work). Do not rely on a third-party address, which can change, throttle you, be blocked by your users' networks or content-security policy, or track them. Without a working probe only the browser's flag is used, and that cannot tell Wi-Fi from internet. NetworkConnection shows the result as a panel, a badge or a banner.

Status: online (browser says online)

API

Parameters

  • probeUrlstring
    Default: required

    Your own URL, checked to prove the internet is reachable (for example your API health endpoint). Do not use a third-party address.

  • intervalnumber
    Default: 0

    Check again every this many ms (0: only on start, online and check()).

  • timeoutnumber
    Default: 5000

    Give up on a check after this many ms.

  • enabledboolean
    Default: true

    Set false to stop listening and checking.

Returns

  • status'online' | 'offline' | 'unreachable' | 'checking'

    The combined result.

  • onlineboolean

    The browser's own online flag.

  • latencynumber

    Round trip of the last successful check, in ms.

  • lastCheckedDate

    When the last check finished.

  • connection{ effectiveType?, downlink?, rtt?, saveData? }

    What the browser reports about the connection.

  • check() => Promise<void>

    Run a check now (needs a probeUrl).

See also:NetworkConnection