Translating Your ReactJS Application with i18n.js
Getting your ReactJS application to be used by people that don’t only speak your language, is important for your app to actually be used by people from other countries or even from your own country.
In React, you have multiple choices on how to go about translating your app. These choices are the following frameworks:
All of these libraries provide their own way of providing translations in your application. However, I am here to talk about i18n, since this is the one that I have experience with and have heard, and seen, many good things about.
If you don’t feel like reading all the way through, check out the showcase I made on Github. The showcase has 4 different routes showcasing each method of using i18n.
What Does i18n Promise to Deliver?
The i18n library not only offers localization, but also brings some helpful features with it that work out of the box. These include:
- detecting the user language
- loading the translations
- optionally caching the translations
- extension, by using post-processing — e.g. to enable sprintf support.
All you need to supply i18n is a file that contains your translations and you’re ready to go.
How to Use i18n in a ReactJS Project?
First off, you need to install i18n:
npm install react-i18next i18next
Optionally, you can install the browser language detector, which will automatically set the language to localize to, based on the browsers default language. To use the language detector, install the following npm package:
npm install i18next-browser-languagedetector
After installing the wanted i18n dependencies, you need to define an i18n instance. The instance will contain all the configurations for i18n including the translations that you will be defining for your project.
An instance can be defined in the following way:
In the above instance, we tell i18n to usue the language detector that we installed as an npm dependency and define two resources that the application has. These resources represent the language and contain a translation object containing key value pairs.
If the user requests a language that isn’t defined in the resources, we can tell i18n to use a certain language as a fallback, which is what is happening wiwth the fallbackLng key.
Great! Now that we an instance defined, we can dive into the different ways of using i18n in our React code.
The i18n Hook
You should already be familiar with react hooks, such as the useState hook or the useEffect hook.
i18n brings its own hook to the table. In your functional components, you can use the useTranslation hook that is exported from the react-i18next package.
Here’s a usagge of the useTranslation hook:
UseTranslation returns the i18n instance as well as a function to get a translation by key. In the return method we call the translation function to retrieve the text for the helloWorld key.
i18n will return the value for the key based on the detected browser language. If the browser language is english, it will return “Hello World”. If it is german, “Hallo Welt”. If neither of these languages are detected, the returned value will be “Hello World” since english is configured as the default language.
The i18n HOC
We can also use higher order components with i18n. It works similar to the useTranslation hook, since it still uses a translation function. However, how this function is integrated works differently.
In the arguments of the component, we get props passed in containing the i18n instance and the translation function. We can use it just like in the previous example.
The big difference is at the end of the file. Here we use a different function that is exported from react-i18next to pass these props into the component when it is created.
The Render Prop
i18n also provides a render prop that, similarly to the other usages, gets a translation function and the i18n instance passed to it.
You could wrap your entire code in the render prop and use the translation function like this.
i18n says that you can use this in a functional component as well as a class component.
The Trans Prop
On the i18n project page, they recommend not to use the Trans component, as it brings more features than you would actually need in a normal project except if you have react nodes that you want to be integrated into a translated text. Most of the features are supported by the other ways of localizing text in your components.
Also important to note is that the Trans component does not rerender when the language is changed. If you absolutely need to use the Trans component, use withTranslation or useTranslation if you want the component to be rerendered.
If you have been looking for a way of localizing your ReactJS application, this is definitely the way to go. i18n is simple enough to be used in any situation and they offer plenty of ways of integrating it into your application
