useOnline

Reactive online state. A thin wrapper around useNetwork that returns only the `isOnline Observable.

Demo

Online Status

Online

Tracks whether the browser is currently online.

You are connected to the internet.

Usage

Hook

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

function Component() {
  const isOnline$ = useOnline();

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

Scope

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

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

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

With onChange callback

Use onChange on the returned Observable to react to network status changes.

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

function Component() {
  const isOnline$ = useOnline();

  useMount(() => {
    return isOnline$.onChange(({ value }) => {
      console.log(value ? "Back online" : "Gone offline");
    });
  });

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

Type

Parameters

Parameter	Type	Description
options	UseNetworkOptions (optional)	-

UseOnlineOptions

Option	Type	Default	Description
window	WindowSource	-	-

Returns

UseOnlineReturn

Name	Type	Description
peek	{ (): boolean; (): boolean; }	-
get	(trackingType?: TrackingType | GetOptions) => boolean	-
onChange	(cb: ListenerFn<boolean>, options?: { trackingType?: TrackingType; initial?: boolean | undefined; immediate?: boolean | undefined; noArgs?: boolean | undefined; } | undefined) => () => void	-

Source

View on GitHub