Intl-T

A Fully-Typed Object-Based i18n Translation Library.

Fully-Typed Node-Based i18n Translation Library.

Intl T, International Tree, International Translations, International T Object, Internationalization for TypeScript, International T

Features

• 🎯 Fully-Typed for TypeScript with autocomplete for translation variables
• 🌲 Node-based translations for easy organization and management
• ✨ Type-safe translation keys, values and all sub-nodes
• 🚚 Supports JSON files and dynamic remote imports
• 🪄 Flexible syntax integrating all the best parts of other i18n libraries
• 🧩 ICU message format support and extended for complex and nested pluralization and formatting
• ⚛️ React components injections out of the box with translation variables
• 🚀 Supports server-side rendering and static rendering with Next.js and React
• 🔄 Dynamic importing of locales for optimized bundle size and on-demand language loading
• ⚙️ Modular and agnostic to any framework or library
• 📦 4kb Lightweight bundle with no external dependencies and Tree-Shakable

Demo

export default function Component() {
  const { t } = useTranslation("homepage");

  return (
    <>
      <h1>{t("title")}</h1>
      {/* Get translations as an object or function */}
      <h2>{t.title}</h2>

      {/* Use variables in your translations */}
      <span>{t("welcome", { user: "Ivan" })}</span>
      <span>{t.summary(data)}</span>
      {/* Flexible syntax */}

      <p>{t("main", { now: Date.now() })}</p>
      <ul>
        {/* Array of translations */}
        {t.features.map(t => (
          <li key={t.id} title={t("title")}>
            {t}
          </li>
        ))}
      </ul>
      <ul>
        <li>{t.features[0]}</li>
        <li>{t("features.1", { name: "Ivan V" })}</li>
        <li>{t("features")[2]({ name: "Ivan V" })}</li>
        <li>{t({ name: "Ivan V" }).features("3")}</li>
      </ul>
      {/* Node-based translations */}
      <p>{t.page1.section1.article1.title}</p>
      <p>{t("page1/section1").article1("title")}</p>
      {/* Full typesafe with completion for variables */}
      <p>{t({ day: "Monday" }).account(UserVariables).options.change}</p>
    </>
  );
}

// en.json
{
  "title": "Homepage",
  "welcome": "Welcome, {user}!", // support ICU message format
  "summary": "{count, plural, =0 {no items} one {# item} other {# items}}",
  "main": "It is {now, date, sm}",
  "features": [
    "Hi {name}. This is Feature 1",
    "Hi {name}. This is Feature 2",
    "Hi {name}. This is Feature 3",
    {
      "base": "Hi {name}. This is Feature 4 with html title", // base is default text for objects
      "title": "Feature 4",
    },
  ],
  "page1": {
    "section1": {
      "article1": {
        "title": "Article 1",
      },
    },
  },
  "account": {
    "options": {
      "change": "Change your account settings. Your account id is {accountId}",
    },
    "values": {
      // default values for this node
      "accountId": 0,
    },
  },
  "values": {
    // default values
    "user": "World",
    "name": "{user}",
    "now": "{(Date.now())}",
  },
}

→ Read the full Intl-T documentation

Support

If you find this project useful, consider supporting its development ☕ or leave a ⭐ on the Github Repo. Also, if you need direct support or help, please don't hesitate to contact me.