Runtime

Use the generated runtime helpers in your app.

anylang scan generates a runtime file, usually src/anylang.ts, from your source and target locales. Import from that generated file in app code.

import {
  AnyLangProvider,
  useLanguage,
  useTr,
  type LanguageCode,
} from "@/anylang";

Provider

Wrap the application once with AnyLangProvider.

<AnyLangProvider>
  <App />
</AnyLangProvider>

Static JSX text

After the Vite plugin or Next.js wrapper is configured, normal static JSX text is translated automatically.

export function Hero() {
  return <h1>Translate your website with anylang</h1>;
}

Use tr="false" for strings that should not be translated.

<p tr="false">BrandName</p>

Dynamic text

Use useTr when the string is dynamic, conditional, or not plain JSX text.

import { useTr } from "@/anylang";

export function SaveButton() {
  const $tr = useTr();
  return <button>{$tr("actions.save", "Save")}</button>;
}

Language state

Use useLanguage to read and update the selected locale.

import { useLanguage, type LanguageCode } from "@/anylang";

export function LanguageSelector() {
  const { language, languages, setLanguage } = useLanguage();

  return (
    <select
      value={language}
      onChange={(event) => setLanguage(event.target.value as LanguageCode)}
    >
      {languages.map((language) => (
        <option key={language.code} value={language.code}>
          {language.nativeLabel}
        </option>
      ))}
    </select>
  );
}