
Localisation is very important for every web applications, especially with modern React application to improve the user experience for users from around the globe. In this tutorial, I’m going to show you how to create a basic React app that allows user to select their language preference and translation will just magically happen. We will be dive into how to handle language change, plural and singular as well as format your language text.
First, let’s start by building a simple React app with language selections and simple text display. You can clone or download the starter project from this repository.
Setting up react-i18next
After you have the starter project, install the react-i18next
dependency:
yarn add i18next react-i18next
Next, we need to setup react-i18next
in our app:
1. Create a i18n.config.js
inside the src
folder. (Actually, you can name anything you want).
2. Add en.json
and zh.json
in the src
folder.
3. Import the config in App.js
to initialize
Translating text
With the introduce of React Hooks, react-i18next also provide us a useTranslation
hook for us to translate the text.
If you run the app again, you should able to see the text will still showing correctly, which is the “Welcome to the world of wonder”. However, when you click on zh
radio button, it will not switch the language. That’s is what we going to do next.
Changing language
Luckily, i18next
also provide us a useful method called changeLanguage
that help us do all the magic.
Hooray! The translation is work now. That’s how easy we achieve localisation in React app, but we are not going to stop here, aren’t we? i18next
also provided some interesting functionalities to work with the translation too. Let’s check it out!
Interpolation
Interpolation allow us to substitute part of the text in the translation. It is useful when the partial text is needed to change dynamically. Let’s change one of our text to use interpolation. Add the following text in en.json
and zh.json
Then we change the text in App.js
Great, our translation is work and we still able to change the selected language display accordingly.
Plural vs singular
Another common usage of translation is plural and singular, of course, i18next
had it cover for us. To use plural text, you just need to add a suffix of _plural
to the key of your translation. For example:
You will notice we have added 2 keys of translation, one with _plural
suffix and another one is without the suffix. i18next
will automatically help us to use the plural text if the count is more than 1.
Remember, you can only use count
as the key.
Formatting text
The last thing that we going to see today is formatting the data. We can provide a custom handler in i18next
to format the data in interpolation. First, we need to add a custom function in the i18next
config file.
Now we have added the custom function for formatting, now we can add uppercase
in the text interpolation.
Perfect, now you should able to see the selected language is shown as uppercase.
If you interest to get the completed code, you can checkout the completed tutorial.
What’s Next?
Today, we have went through how to achieve localisation in React app with the help of i18next
. We also went through some of the out-of-box functionalities provided by i18next
such as interpolation, plural support as well as formatting.
Although we had achieve basic translation in React app, however, this approach has a major drawback for large application, which is you need to load a large set of text upfront for your application which is not network efficient.
In the next tutorial, we will look into how to separate and lazy load the text file. Until then, see you and have a nice day!