@mikionatsu/t9n

Tiny translation toolkit for Node/JS + React.

✅ Nested keys (common.hello)
✅ Interpolation ("Salom, {name}!")
✅ Fallback locale
✅ Plural (Intl.PluralRules)
✅ React Provider + hooks (@mikionatsu/t9n/react)

Install

npm i @mikionatsu/t9n

Core usage (Node/JS)

const t9n = createT9n({
locale: "uz",
fallbackLocale: "en",
resources: {
uz: { common: { hello: "Salom, {name}!" } },
en: { common: { hello: "Hello, {name}!" } }
}
});```

```console.log(t9n.t("common.hello", { name: "Natsu" })); // Salom, Natsu!```

## Plural

```const t9n = createT9n({
  locale: "en",
  resources: {
    en: { items: { one: "{count} item", other: "{count} items" } }
  }
});

t9n.t("items", { count: 1 }); // 1 item
t9n.t("items", { count: 5 }); // 5 items ```

## React usage

```import { createT9n } from "@mikionatsu/t9n";

export const t9n = createT9n({
  locale: "uz",
  fallbackLocale: "en",
  resources: {
    uz: {
      common: { hello: "Salom, {name}!" }
    },
    en: {
      common: { hello: "Hello, {name}!" }
    }
  }
});```

## Provider

```import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { T9nProvider } from "@mikionatsu/t9n/react";
import { t9n } from "./i18n";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <T9nProvider t9n={t9n} initialLocale="uz">
      <App />
    </T9nProvider>
  </React.StrictMode>
);```


## Hooks

```import React from "react";
import { useT, useLocale } from "@mikionatsu/t9n/react";

export function Header() {
  const t = useT();
  const { locale, setLocale } = useLocale();

  return (
    <div>
      <h1>{t("common.hello", { name: "Natsu" })}</h1>

      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
        <option value="uz">uz</option>
        <option value="en">en</option>
      </select>
    </div>
  );
}