Getting started
Installation
Install using npm
react-i18next can be added to your project using npm:
# npm
$ npm install react-i18next i18next --save
In the /dist
folder you find specific builds for commonjs
, es6 modules
,...
Load from CDN
You can also add a script tag to load react-i18next from one of the CDNs providing it, eg.:
unpkg.com
Translation "how to"
You have two options to translate your content:
Simple content
Simple content can easily be translated using the provided t
function.
Before:
<div>Just simple content</div>
After:
<div>{t('simpleContent')}</div>
JSX tree
Sometimes you might want to include html formatting or components like links into your translations. (Always try to get the best result for your translators - the final string to translate should be a complete sentence).
Before: Your react code would have looked something like:
<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:
<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>
Basic sample
This basic sample tries to add i18n in a one file sample.
import React from "react";
import { createRoot } from 'react-dom/client';
import i18n from "i18next";
import { useTranslation, initReactI18next } from "react-i18next";
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
resources: {
en: {
translation: {
"Welcome to React": "Welcome to React and react-i18next"
}
}
},
lng: "en", // if you're using a language detector, do not define the lng option
fallbackLng: "en",
interpolation: {
escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
}
});
function App() {
const { t } = useTranslation();
return <h2>{t('Welcome to React')}</h2>;
}
// append app to dom
const root = createRoot(document.getElementById('root'));
root.render(
<App />
);
RESULT:

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.
Last updated