@domphy/i18n#

A thin reactive wrapper around i18next. When the locale changes, any UI element that called t(listener, key) re-renders automatically.

Installation#

npm install @domphy/i18n i18next

Quick start#

import { createI18n } from "@domphy/i18n"

const en = { hello: "Hello, {{name}}!", save: "Save" } as const

const { t, setLocale, getLocale, initI18n } = createI18n<"en" | "vi", typeof en>({
  globalKey: "__myapp_i18n__",  // must be unique per app
  namespace: "app",
  locales: {
    en,
    vi: { hello: "Xin chào, {{name}}!", save: "Lưu" },
  },
  defaultLocale: "en",
})

await initI18n()

Reactive usage#

// Reactive — re-renders when setLocale() is called
const Greeting = {
  p: (l) => t(l, "hello", { name: "World" }),
}

// Non-reactive (outside element tree)
const label = t("save")

Locale switching#

// Switch locale — all reactive t(l, ...) re-render automatically
await setLocale("vi")

console.log(getLocale()) // "vi"

detectLocale#

const { detectLocale } = i18n

// Auto-detect from URL prefix (/vi/...) or Accept-Language header
const detected = detectLocale({ fromUrl: true })
await initI18n(detected)

globalThis dedup#

Registers the instance under globalKey on globalThis — ensures a single instance across Vite code-split chunks and SSR + client hydration.

See the Setup guide for full options reference.