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-i18nextNext, 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!