@better-intl/react

React bindings for better-intl — Provider, hooks, <T> component.

Install

npm install @better-intl/react @better-intl/core

Usage

Provider

Wrap your app with IntlProvider:

import { IntlProvider } from "@better-intl/react";
import messages from "../locales/pt-BR.json";

function App() {
  return (
    <IntlProvider locale="pt-BR" messages={messages}>
      <MyApp />
    </IntlProvider>
  );
}

useTranslation hook

import { useTranslation } from "@better-intl/react";

function Greeting() {
  const { t, locale } = useTranslation();

  return (
    <div>
      <h1>{t("greeting", { name: "Alice" })}</h1>
      <p>Current locale: {locale}</p>
    </div>
  );
}

<T> component

For explicit marking of translatable text:

import { T } from "@better-intl/react";

function Hero() {
  return (
    <section>
      <T>Hello world</T>
      <T values={{ name: "Alice" }}>Hello {name}</T>
    </section>
  );
}

Interpolation

Supports ICU-lite — variables, plurals, and select:

const { t } = useTranslation();

t("greeting", { name: "Alice" });       // "Hello Alice"
t("items", { count: 3 });               // "3 items"
t("pronoun", { gender: "female" });      // "She"

API

| Export | Description | |--------|-------------| | IntlProvider | Context provider — pass locale and messages | | useTranslation() | Returns { t, locale } | | useIntlContext() | Returns the raw IntlRuntime | | useTranslationRuntime(id, values?, default?) | Low-level accessor used by compiler | | T | Explicit translation component | | IntlContext | React Context (for advanced use) |

License

MIT