Nowadays, our applications have taken on proportions never before imaginable, and the web has given us the possibility to make it accessible all over the world. This is where many developers face a problem...
How do I get my app translated quickly and efficiently?
To our happiness, libraries like React have extremely easy alternatives to implement this functionality, and today, we are going to meet one of them, the i18next plugin.
Implementing internationalization
To start, let's go to our facilities. If you want to start an app from scratch, let's use the command below and create a new react app:
yarn create react-app i18napp --template typescript
If you already have a project or have just created yours, install the dependencies that we will need for i18next to work properly:
yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector
Okay, now we already have the packages we need. Let's get your hands on the code!!!
Configuring i18next
To indicate to our app the use of internationalization and properly activate the hooks in it, we must prepare a file that will be next to our index.js, it will be called i18n.js and will contain the following lines:
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
i18n
// Enables the i18next backend
.use(Backend)
// Enable automatic language detection
.use(LanguageDetector)
// Enables the hook initialization module
.use (initReactI18next)
.init({
// Standard language used
fallbackLng: 'en',
debug: true,
//Detects and caches a cookie from the language provided
detection: {
order: ['queryString', 'cookie'],
cache: ['cookie']
},
interpolation: {
escapeValue: false
}
})
export default i18n;
After that, we should import it into our index.js, which will look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './i18n';
ReactDOM.render (
<React.StrictMode>
<Suspense fallback={<div>Loading...</div>}>
<App />
</Suspense>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
All set, react i18next is enabled and ready to use. Now the next step is to incorporate our translations.
Incorporating locales
Internationalizations on the web work on the basis of json with word sections. In this app, we will incorporate English and Portuguese.
For this, in our /public folder we will add the /locales folder that will have two subfolders, /en and /pt, both with a translation.json file that will contain the object with the translations. See an example of the file in English and the structure of the produced folder:
{
"title": "Welcome to an internationalized APP",
"description": {
"part1": "To get started, edit <1>src/App.js</1> and save to reload.",
"part2": "Switch language between english and portuguese using buttons above."
}
}
Locales folter structure
That done, let's get down to business with our homepage.
Customizing the App.js
Now let's go to our final part, building our home page. For this, we will delete the original content of App.js and leave only one div.
Importing the translation hook
To import the i18next hook we use the following code:
import {useTranslation} from "react-i18next";
function App () {
const {t, i18n} = useTranslation ();
The t attribute is used to incorporate our translation and i18n to observe changes in the state of the localization.
Using translation in tags
To use an attribute of our object, we just call the t() function that we have destructured above:
<div><h1>{t("title")}</h1></div>
See how easy it is?
We will complete our app with the code below by adding two buttons that will change the language and see the magic in real time...
import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";
function App() {
const { t, i18n } = useTranslation();
const changeLanguage = (language) => {
i18n.changeLanguage(language);
};
return (
<div className="App">
<button onClick={() => changeLanguage("en")}>EN</button>
<button onClick={() => changeLanguage("pt")}>PT</button>
<hr />
<div><h1>{t("title")}</h1></div>
<div>{t("description.part1")}</div>
<div>{t("description.part2")}</div>
</div>
);
}
export default App;
Observing the magic
If you entered the code correctly, the magic below should happen to your app. Translation is done at runtime.
Did you liked? The code is available on my github.
Thanks for reading!!!
Top comments (10)
Nice article. i18next is also my go-to library, very nice ecosystem, and has libraries for all major frameworks.
i18next is a very interesting library. Nowadays in react it just competes with react-intl but i18next is far more intuitive and fast.
I personally chose react-intl because it was much simpler to use on the beginning, but so far I didn't spot any issues with that, even on complex systems. It's simple and good enough to do the job. :) That's why I'm happy that I found your post about i18next, so I was able to see how to setup it quickly
Good one. Bring more
Thanks Usman Khalil! :)
Thank You!!
Thank you for reading florensadi :D
Hi, thanks for the simple solution! You can follow my profile to check how to solve localization problems in more complex systems 👍
Thanks Jakub. Following you :)
Hehe.... I like to observe the magic 😉
Here you can observe even more i18next magic: dev.to/adrai/how-to-properly-inter... 👀