# useOnline

Whether the browser has a network connection, and re-renders when it changes.

Renders `serverValue` on the server and during hydration, then switches to `navigator.onLine` with no hydration mismatch.

## Import

```ts
import { useOnline } from '@vincent.ri/react-tils'
// or only this hook
import { useOnline } from '@vincent.ri/react-tils/useOnline'
```

## Usage

```ts
const online = useOnline()
return online ? null : <Banner>You are offline. Changes will sync later.</Banner>
```

## When to use it

Showing an offline banner, disabling actions that need the network, or queueing writes until the connection is back.

## When not to

You need to know a server is reachable. `true` only means the device has a network (it can still be a captive portal or a dead Wi-Fi), so handle request failures anyway.

## API

```ts
function useOnline(serverValue?: boolean): boolean
```

| Parameter | Description |
| --- | --- |
| `serverValue` | Value on the server and during hydration. Default `true`, since most visitors are online. |

## Browser support

Works in all modern browsers.

## Coming from another library?

Other libraries call this `useNetworkState`, `useNetwork`.

---

112 B minified and brotlied
Source: https://github.com/vincentri/react-tils/blob/main/src/useOnline.ts
Docs page: https://vincentri.github.io/react-tils/hooks/useOnline/
Previous: [useBroadcastChannel](https://vincentri.github.io/react-tils/hooks/useBroadcastChannel.md)
Next: [useNetworkInformation](https://vincentri.github.io/react-tils/hooks/useNetworkInformation.md)