Intl-T.

nivandres/intl-t

295

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

page.tsx

export default function () {
  const {  } = ("homepage");
  return (
    <>
      <>{("title")}</>
      <>{.({ : "Ivan" })}</>
      <>
        {..( => (
          < ={.}>{}</>
        ))}
      </>
      <>{("title
welcome
features
counter
features.0
features.1
features.2
", { /* type-safe */ }).()}</>
    </>
  );
}

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 {  } from "intl-t";

export const {  } = new ({
  : {  },
});

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