---
title: Runtime
description: Load a locale catalog and consume messages through React components and hooks.
order: 11
toc:
  - id: load-the-catalog
    title: Load the catalog
  - id: provide-the-locale
    title: Provide the locale
  - id: translate-content
    title: Translate content
---

## Load the catalog {#load-the-catalog}

The generated catalog loader works in development, production, and SSR builds:

```tsx
import { use } from "react"
import { loadMessageCatalog } from "@workspace/i18n/catalogs"

const messages = use(loadMessageCatalog(locale))
```

## Provide the locale {#provide-the-locale}

```tsx
<I18nProvider
  locale={locale}
  locales={[
    { locale: "en-US", label: "English" },
    { locale: "zh-Hans", label: "简体中文" },
  ]}
  catalogs={{ [locale]: messages }}
>
  {children}
</I18nProvider>
```

## Translate content {#translate-content}

Use `Translate` for JSX content, `useTranslate` for an imperative translation function, and `useMessage` for a single descriptor. `useLocale`, `useLocales`, and `useFormatters` expose locale state and `Intl` formatters.

`Translate` delegates to Lingui without adding a wrapper DOM element.