---
id: react/api/use-pack-status
title: usePackStatus
---

Offline UI state: which locale is downloading, whether the app is still booting, and per-locale install progress. Reads the same store as `useStift()`, so it re-renders on install and activate events.

```tsx
const { pendingLocale, isBooting, packInstalls, getStatus } = usePackStatus()
```

## Returns

### `pendingLocale`

- Type: `RegisteredLocale | undefined`
- Set while a locale is downloading before becoming active. `undefined` means nothing is in flight — the field to watch for a spinner.

### `isBooting`

- Type: `boolean`
- True until the boot promise settles. Prefer `<BootFallback>` for the first paint and this flag for in-app transitions after it.

### `packInstalls`

- Type: `Map<RegisteredLocale, PackInstallProgress>`
- Live progress records keyed by locale, for download bars and byte counts.

### `getStatus`

- Type: `(locale?: RegisteredLocale) => PackInstallProgress['status'] | undefined`
- The status of one locale's install, or the active locale when omitted.

## Examples

```tsx
function UpdateBanner() {
  const { pendingLocale, getStatus } = usePackStatus()
  if (!pendingLocale) return null
  const status = getStatus(pendingLocale)
  return <p>Downloading {pendingLocale}… ({status})</p>
}
```

## Next

- Showing "update available" without diffing → [Offline & Persistence](../../runtime/offline-persistence.md)
- Install/activate lifecycle → [Updates & Invalidation](../../runtime/updates-invalidation.md)