Skip to main content
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>
  );
}