---
title: useOnline
description: "`useOnline` is a custom hook that detects whether the browser is online."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-online
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-useonline--basic
---

# useOnline

`useOnline` is a custom hook that detects whether the browser is online.

```tsx
const online = useOnline()

return (
  <Badge colorScheme={online ? "green" : "red"}>
    {online ? "Online" : "Offline"}
  </Badge>
)
```

## Usage

```tsx
import { useOnline } from "@yamada-ui/react"
```

```tsx
import { useOnline } from "@/components/ui"
```

```tsx
import { useOnline } from "@workspaces/ui"
```

```tsx
const online = useOnline()
```