---
title: "Show translated content"
description: "Make translated text available throughout your application with LocaleProvider, t(), and T."
canonical_url: "https://docs.linguana.dev/docs/build-with-code/show-translated-content"
markdown_url: "https://docs.linguana.dev/docs/build-with-code/show-translated-content.md"
x_farming_labs_generated_preamble: true
agent:
  task: "Configure LocaleProvider and locale controls in React."
  outcome: "Users can switch supported locales and catalog failures retain readable source copy."
  appliesTo:
    framework:
      - "React"
    package:
      - "@linguanahq/react"
  prerequisites:
    - "A schema-compatible embedded source catalog exists."
    - "Remote delivery has a browser-safe publishable key."
  files:
    - "The application root."
  verification:
    - "Locale switching persists the cookie and remote failure emits a sampled diagnostic."
  rollback:
    - "Remove LocaleProvider and render the existing source application."
  failureModes:
    - symptom: "setLocale does not change the locale."
      resolution: "Confirm the locale is fallback, already loaded, or remotely available."
---

# Show translated content
URL: /docs/build-with-code/show-translated-content
LLM index: /llms.txt
Description: Make translated text available throughout your application with LocaleProvider, t(), and T.
Related: /docs/build-with-code/server-rendering, /docs/reference/catalog-delivery, /docs/automate/test-integration

<!-- farming-labs:agent-contract:start -->
## Agent Contract

Task: Configure LocaleProvider and locale controls in React.
Outcome: Users can switch supported locales and catalog failures retain readable source copy.

### Applies To

- Framework: `React`
- Package: `@linguanahq/react`

### Prerequisites

- A schema-compatible embedded source catalog exists.
- Remote delivery has a browser-safe publishable key.

### Files

- `The application root.`

### Verification

- Locale switching persists the cookie and remote failure emits a sampled diagnostic.

### Rollback

- Remove LocaleProvider and render the existing source application.

### Failure Modes

- setLocale does not change the locale. — Recovery: Confirm the locale is fallback, already loaded, or remotely available.
<!-- farming-labs:agent-contract:end -->

# Show translated content in your app

Add `LocaleProvider` once, then use `t()` or `<T>` wherever your application displays text.

## Add the provider

`LocaleProvider` makes translations available to every component below it:

```tsx title="src/locale-provider.tsx"
import { LocaleProvider } from "@linguanahq/react";
import { embeddedEnglish } from "./catalogs/en";

export function AppLocaleProvider({ children }: { children: React.ReactNode }) {
  return (
    <LocaleProvider
      projectId="your-project-id"
      environment="production"
      initialLocale="en"
      fallbackLocale="en"
      catalogs={[embeddedEnglish]}
    >
      {children}
    </LocaleProvider>
  );
}
```

## Translate text with a value

```tsx title="src/greeting.tsx"
function Greeting({ name }: { name: string }) {
  const { t } = useTranslation();
  return <p>{t("Welcome, {name}", { name })}</p>;
}
```

Use `t()` for simple text and values. Use `<T>` when the message contains a link or another component. See [Translate dynamic text and links](/docs/build-with-code/dynamic-text-and-links).

## Add a language selector

`LanguageSelector` is ready to use. `useLocaleOptions()` gives you the same behavior when you want to build your own UI.

```tsx
function LocaleMenu() {
  const { locale, options, ready, setLocale } = useLocaleOptions();

  return (
    <select
      value={locale}
      disabled={!ready}
      onChange={(event) => void setLocale(event.currentTarget.value)}
    >
      {options.map((option) => (
        <option key={option.code} value={option.code}>
          {option.nativeName}
        </option>
      ))}
    </select>
  );
}
```

When a user chooses a language, Linguana loads the published language file and remembers the preference.

## Load remote languages

Add a browser-safe endpoint and publishable key when your app should load translated language files remotely:

```tsx
<LocaleProvider
  {...props}
  catalogEndpoint={import.meta.env.VITE_LINGUANA_API_URL}
  publishableKey={import.meta.env.VITE_LINGUANA_PUBLISHABLE_KEY}
>
  <App />
</LocaleProvider>
```

The publishable key may reach the browser. The project token may not.

## If a language is unavailable

Your original language remains visible. Advanced diagnostics and preference synchronization are covered in the [React API reference](/docs/reference/react) and [Catalog runtime troubleshooting](/docs/troubleshooting/catalog-runtime).

## Next

Add [server rendering](/docs/build-with-code/server-rendering) if your app renders on the server, then [choose your languages](/docs/use-linguana/choose-languages).

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.
Docs-scoped sitemap: [/docs/sitemap.md](/docs/sitemap.md).
Well-known sitemap: [/.well-known/sitemap.md](/.well-known/sitemap.md).