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
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).
zh.json in the
3. Import the config in
App.js to initialize
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.
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 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
Then we change the text in
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.
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.
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!