@alphinex/i18n

Locale, message-catalog, and reading-direction primitives.

<I18nProvider> + useTranslation()

import { I18nProvider, useTranslation } from "@alphinex/i18n";

const messages = {
  en: { greeting: "Hello, {name}!", nav: { settings: "Settings" } },
  ar: { greeting: "مرحبا يا {name}!" },
};

function App() {
  return (
    <I18nProvider messages={messages} defaultLocale="en">
      <Greeting />
    </I18nProvider>
  );
}

function Greeting() {
  const { t, locale, setLocale } = useTranslation();
  return (
    <>
      <p>{t("greeting", { name: "Ada" })}</p>
      <button onClick={() => setLocale("ar")}>عربي</button>
    </>
  );
}

t(key, params?) does a dotted-key lookup ("nav.settings") into the active locale's catalog, falls back to defaultLocale's catalog if a key is missing there, and finally falls back to the raw key if it's missing from both. {param} placeholders in a message string are replaced from the params object.

getDirForLocale(locale)

Derives reading direction from a BCP 47 locale tag. This package intentionally has no dependency on @alphinex/theme — compose the two yourself so theme stays i18n-agnostic:

import { getDirForLocale, I18nProvider, useTranslation } from "@alphinex/i18n";
import { ThemeProvider } from "@alphinex/theme";

function Root() {
  return (
    <I18nProvider messages={messages} defaultLocale="en">
      <ThemedApp />
    </I18nProvider>
  );
}

function ThemedApp() {
  const { locale } = useTranslation();
  return (
    <ThemeProvider dir={getDirForLocale(locale)}>
      <App />
    </ThemeProvider>
  );
}

See documentation/ARCHITECTURE.md for the full package contract, dependency rules, and roadmap placement.