---
title: useOnline
description: "Reactive online state. A thin wrapper around [`useNetwork`](/web/sensors/useNetwork) that returns only the `isOnline Observable."
category: Sensors
sidebar:
  order: 8
type-table:
  import: "@usels/web"
  name: "UseOnline"
  params:
    children:
      - UseOnlineOptions
---

## Demo

## Usage

<CodeTabs>
  <Fragment slot="hook">
    ```tsx twoslash
    // @noErrors
    import { useOnline } from "@usels/web";

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

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

  </Fragment>
  <Fragment slot="scope">
    ```tsx
    import { createOnline } from "@usels/web";

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

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

  </Fragment>
</CodeTabs>

### With `onChange` callback

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

```tsx
// @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>;
}
```