Intl-T.

nivandres/intl-t

267

A Fully-Typed Object-Based i18n Translation Library for TypeScript, React, and Next.js

page.tsx

export default function HomePage() {
  const { t } = useTranslation("homepage");
  return (
    <main>
      <h1>{t("title")}</h1>
      <span>{t.welcome({ name: "Ivan" })}</span>
      <ol>
        {t.features.map(t => (
          <li key={t.key}>{t}</li>
        ))}
      </ol>
      <span>{t("title
welcome
features
counter
features.0
features.1
features.2
", { /* type-safe */ }).toLowerCase()}</span>
    </main>
  );
}

en.json

{
  "homepage": {
    "title": "Homepage",
    "welcome": "Welcome, {name}!",
    "features": ["feat 1", "feat 2", "feat 3"],
    "counter": "{count, plural,
                  =0 {Count is zero}
                  =1 {Count is one}
                  other {Count is #}
                }"
  },
  /* other pages */
}

translation.ts

import { Translation } from "intl-t";

export const { useTranslation } = new Translation({
  locales: { en },
});

html

<main>
  <h1>Homepage</h1>
  <span>Welcome, Ivan!</span>
  <ol>
    <li>feat 1</li>
    <li>feat 2</li>
    <li>feat 3</li>
  </ol>
  <span>count is zero</span>
</main>

Fully Type-Safe

Auto-completion everywhere: at translations, keys, with variables, and more.

Fast & Lightweight

Lightweight bundle with zero external dependencies, tree shakeable, and optimized for performance.

Framework Agnostic

Works in TypeScript, React, Next.js but is compatible everywhere.

Rich API

Object-based message nodes. Readable and maintainable. Super flexible.

Formatting Helpers

Has out of the box variable injection with an extended ICU format support.

Next.js Navigation

Seamless RSC integrations with a customizable navigation system, optimized for performance.

Installing

Use your preferred package manager.

npm install intl-t

Developed by @nivandres