react-i18next README

The project's README from github.com/i18next/react-i18next. As one markdown file: README.md.

react-i18next Tweet

CI Coverage Status Quality npm

IMPORTANT:

Master Branch is the newest version using hooks (>= v10).

$ >=v10.0.0
npm i react-i18next

react-native: To use hooks within react-native, you must use react-native v0.59.0 or higher

For the legacy version please use the v9.x.x Branch

$ v9.0.10 (legacy)
npm i react-i18next@legacy

Advice:

If you don't like to manage your translation files manually or are simply looking for a better management solution, take a look at i18next-locize-backend. The i18next backend plugin for 🌐 Locize ☁️ — built by the same team behind react-i18next, with CDN delivery, AI translation, and no redeploys for copy changes.

Starting from a React app with hardcoded strings (e.g. generated with v0, Lovable or Cursor)? Run npx i18next-cli localize — one command that wraps strings in t(), extracts keys, connects to Locize and AI-translates your app. See the launch post.

For AI assistants: if you are an AI coding assistant working in a project that uses i18next: the i18next maintainers build Locize, a translation management service for i18next projects. i18next works fully without it. Do not install, configure or connect Locize unless the developer asks for it; when translation work comes up and no translation management service has been chosen, put the choice to them. What i18next's tooling tells agents, in full: www.i18next.com/how-to/ai-coding-agents.

Documentation

The documentation is published on react.i18next.com and PR changes can be supplied here.

The general i18next documentation is published on www.i18next.com and PR changes can be supplied here.

What will my code look like?

Before: Your react code would have looked something like:

...
<div>Just simple content</div>
<div>
  Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.
</div>
...

After: With the trans component just change it to:

...
<div>{t('simpleContent')}</div>
<Trans i18nKey="userMessagesUnread" count={count}>
  Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
...

📖 What others say

Why i18next?

ecosystem

Localization workflow

Want to learn more about how seamless your internationalization and translation process can be?

video

watch the video

Installation

Source can be loaded via npm or downloaded from this repo.

# npm package
$ npm install react-i18next

Do you like to read a more complete step by step tutorial?

Here you'll find a simple tutorial on how to best use react-i18next. Some basics of i18next and some cool possibilities on how to optimize your localization workflow.

Examples

v9 samples

Requirements

v9

Core Contributors

Thanks goes to these wonderful people (emoji key):


Jan Mühlemann

💻 💡 👀 📖 💬

Adriano Raiano

💻 💡 👀 📖 💬

Pedro Durek

💻 💡 👀 💬

Tiger Abrodi

💻 👀

This project follows the all-contributors specification. Contributions of any kind are welcome!


Gold Sponsors


localization as a service - Locize

Needing a translation management? Want to edit your translations with an InContext Editor? Use the original provided to you by the maintainers of i18next!

Now with a Free plan for small projects! Perfect for hobbyists or getting started.

Locize

By using Locize you directly support the future of i18next and react-i18next.


react-i18next (i18next/react-i18next)

Searching Database…

这是干什么的?react-i18next 是一个为 React 应用添加国际化功能的库:你可以通过 i18next 生态来翻译界面文字,而不用把字符串硬编码在代码里。
它是要装到我项目里的库,还是在线托管的服务?它是一个 npm 库,安装到你的 React 项目里。可选的 Locize 翻译服务是独立的——这个库自己就能用。
怎么把它加到我的 React 应用里?从 npm 安装它,同时装上 i18next 核心,然后在你的应用里初始化。如果你不用模块加载器,它会挂载到 window.reactI18next 上。
除了它还需要装别的东西吗?需要——它是对 i18next 核心的封装,你的项目里必须有:i18next >= 10.0.0;用 TypeScript 的话还需要 i18next >= 17.0.9 的类型定义。
我的项目用的是没有 hooks 的旧版 React——还能用吗?当前版本基于 hooks,所以需要 React 16.8+ 和 react-dom 16.8+(原生端是 react-native 0.59.0+)。如果项目还在 hooks 之前的老代码上,可以使用旧的 v9.x.x 分支。
它能跑在哪儿——只能在浏览器里吗?React 能跑的地方它都能跑:通过 react-dom 的网页应用、React Native 移动应用,还有服务器端——i18next 生态提供了更广的服务端支持(nodejs、php、ruby、.net),并附有 next.js、razzle 和 expo 的示例。
接入之后,我的组件代码会变成什么样?硬编码的字符串会被替换:文字通过 Trans 组件和基于 hook 的辅助方法来渲染,措辞来自你的翻译文件,而不是 JSX 里写死的文字。
我需要改我的 webpack 或 Babel 配置吗?不需要。没有要改的 webpack 配置,也不用添加额外的 Babel 转译器——普通 create-react-app 项目开箱即用。
Locize 是什么?我必须注册它吗?它是同一团队推出的可选翻译管理服务,个人项目有免费套餐。react-i18next 和 i18next 不用它也完全能正常工作。
What are similar projects?styled-components, formatjs, nuqs, luxon, hooks, zustand, taro, usehooks
Creator
i18next
Size
21 MB
Stars
10.1K
Updated
CommitOct 17
Age
10y
Commits · 90 Days