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…

10.1K ·GitHub
React-i18next
Что это такое?react-i18next — это библиотека, которая добавляет интернационализацию в приложения на React: тексты интерфейса переводятся через экосистему i18next вместо того, чтобы прописывать строки прямо в коде.
Это библиотека, которую я добавляю в свой проект, или онлайн-сервис?Это npm-библиотека, которую вы устанавливаете в свой React-проект. Необязательный сервис перевода Locize — отдельная вещь: библиотека прекрасно работает и без него.
Как добавить её в своё React-приложение?Установите её из npm вместе с ядром i18next и выполните инициализацию в своём приложении. Если вы не используете сборщик модулей, библиотека подключается к объекту window.reactI18next.
Нужно ли что-то ещё установить вместе с ней?Да — она является обёрткой над ядром i18next, которое должно быть в проекте: i18next >= 10.0.0, а для TypeScript нужны типы из i18next >= 17.0.9.
Мой проект застрял на старой версии React без хуков — библиотека всё равно подойдёт?Текущий релиз построен на хуках, поэтому нужны React 16.8+ и react-dom 16.8+ (на мобильных — react-native 0.59.0+). Для проектов до эпохи хуков есть старая ветка v9.x.x.
Где она работает — только в браузере?Везде, где работает React: в веб-приложениях через react-dom, в мобильных приложениях на React Native и на сервере — экосистема i18next предлагает широкую серверную поддержку (nodejs, php, ruby, .net), с примерами для next.js, razzle и expo.
Как будет выглядеть код моего компонента после подключения?Зашитые в код строки исчезают: текст выводится через компонент Trans и хук-хелперы, а сами формулировки берутся из ваших файлов переводов, а не из литералов в 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
Which topics is it in?internationalization, hooks, ssr, localization, react-native, translation, i18n, multilingual, javascript-library, mobile, ios, web-development
Creator
i18next
Size
21 MB
Stars
10.1K
Updated
CommitOct 17
Age
10y
Commits · 90 Days