Localization that just works at runtime.

Create translation resources

Plain objects, one per language. Keys are whatever you want — SCREAMING_CASE keeps them easy to spot in JSX.

locales/en.tsexport default {
  TITLE: "Atum Localization",
  LOGIN: "Login",
  SAVE: "Save",
  CANCEL: "Cancel",
  LANGUAGE: "Language",
};

Create the localization instance

Wire your resources together with a default and a fallback language.

localization.tsimport { createLocalization } from "atum-localization";
import en from "./locales/en";
import ta from "./locales/ta";

export const localization = createLocalization({
  defaultLanguage: "en",
  fallbackLanguage: "en",
  resources: { en, ta },
});

Enable language detection

Automatically detect the browser locale and persist an explicitly selected language using LocalStorage, SessionStorage, or no persistence.

localization.tsexport const localization = createLocalization({
  defaultLanguage: "en",
  fallbackLanguage: "en",
  resources: { en, ta },
  detection: {
    enabled: true,
    storage: "local",
    storageKey: "atum-localization-language",
  },
});

Detection priority: stored language → browser language → defaultLanguage. Regional locales try an exact match first, then the base language.

Wrap your application

Mount LocalizationProvider once, at the root.

main.tsximport { LocalizationProvider } from "atum-localization";
import { localization } from "./localization";

<LocalizationProvider localization={localization}>
  <App />
</LocalizationProvider>

Translate content

useTranslation() returns a t() function scoped to the current language.

Home.tsximport { useTranslation } from "atum-localization";

export default function Home() {
  const { t } = useTranslation();
  return <h1>{t("TITLE")}</h1>;
}

Change language

useLanguage() gives you the active language and a setter — this is what powers the demo above.

LanguageSelector.tsximport { useLanguage } from "atum-localization";

export default function LanguageSelector() {
  const { language, setLanguage } = useLanguage();
  return (
    <select value={language} onChange={e => setLanguage(e.target.value)}>
      <option value="en">English</option>
      <option value="ta">Tamil</option>
    </select>
  );
}