45 lines
1.1 KiB
Plaintext
45 lines
1.1 KiB
Plaintext
|
---
|
||
|
|
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.
|