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:

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

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.

Add a language selector

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

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:

<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 and Catalog runtime troubleshooting.

Add server rendering if your app renders on the server, then choose your languages.

Did this page get you to a working result?

Edit on GitHubllms.txt llms-full.txt