intl-t
Version:
A Fully-Typed Object-Based i18n Translation Library
125 lines (103 loc) • 4.38 kB
Markdown
# Intl-T
### A Fully-Typed Object-Based i18n Translation Library.
[](https://www.npmjs.com/package/intl-t)
[](https://www.typescriptlang.org/)
[](https://reactjs.org/)
[](https://nextjs.org/)
[](https://github.com/sponsors/nivandres)
[](https://github.com/nivandres/intl-t)
[](https://intl-t.dev/)
> Fully-Typed Node-Based i18n Translation Library.
`Intl T,
International Tree,
International Translations,
International T Object,
Internationalization for TypeScript,
International T`
<p align="center">
<a href="https://intl-t.dev/"><strong>→ Visit Intl-T Web 💻</strong></a>
</p>
## Features
- 🌲 **Node-based translations** — the tree is the API: `t.page.section.title`
- 🎯 **Fully-typed** and **type-safe** translation keys, values and all sub-nodes
- 🚚 Supports **JSON files** and dynamic **remote** imports on demand
- 🪄 **Flexible and familiar drop-in 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 typed chunks and variables
- 🚀 Supports **SSR**, **RSC** and **Static Rendering** with [Next.js](https://nextjs.org/), serverless friendly
- 🔄 **On-demand locale loading** for lazy per-language chunks of just a few KB
- ⚙️ Modular and agnostic to **any framework** or **library**
- 📦 **[6kb](https://bundlephobia.com/package/intl-t) Lightweight bundle** with no dependencies, no side effects, and Tree-Shakable
## Installation
```bash
npm install intl-t # or: bun add intl-t · pnpm add intl-t · yarn add intl-t
```
Zero external dependencies · TypeScript ≥ 5 · Node 18+, Bun, Deno, Edge & browsers
## Demo
```jsx
export default function Component() {
const { t } = useTranslation("homepage");
return (
<>
<h1>{t.title}</h1>
<span>{t("welcome", { user: "Ivan" })}</span>
<span>{t.summary({ count: 4 })}</span>
<ul>
{t.features.map(t => (
<li key={t.id}>{t}</li>
))}
</ul>
<p>{t.page1.section[0].article1.title}</p>
<p>{t("page1.section.0").article1("title")}</p>
<p>{t.account(UserVariables).options.change}</p>
</>
);
}
```
<details>
<summary>View demo JSON source</summary>
```jsonc
// en.json
{
"title": "Homepage",
"welcome": "Welcome, {user}!", // support ICU message format
"summary": "{count, plural, =0 {no items} one {# item} other {# items}}",
"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": {
"section": [
{
"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}",
},
}
```
</details>
### [**→ Read the full Intl-T documentation**](https://intl-t.dev/docs)
## Support
If you find this project useful, [consider supporting its development ☕](https://github.com/sponsors/nivandres) or [leave a ⭐ on the Github Repo.](https://github.com/nivandres/intl-t) Also, if you need direct support or help, please don't hesitate to contact me.
[](https://github.com/sponsors/nivandres) [](https://github.com/nivandres/intl-t)