DEV Community

Diego (Relatable Code)
Diego (Relatable Code)

Posted on • Originally published at relatablecode.com on

How to set up localization with react-i18next

Communication image
Photo by Headway on Unsplash

One of the features requested for a personal app of mine was to add multiple languages! Namely German and Spanish. So I decided to go ahead and learn react-i18next.

Here is a short description from the team at react-i18next on what it’s for:

react-18next is a powerful internationalization framework for React / React Native which is based on i18next

With that short introduction out of the way let’s go ahead and get into the setup!

Disclaimer: This is for a react web app!

Setting it up

First, let’s install the necessary packages:



npm install react-i18next i18next


Enter fullscreen mode Exit fullscreen mode

With the packages created let’s create (I am using Typescript btw) the configuration file at the root, let’s name it i18n.ts.

Within the file we’ll go ahead and import the necessary modules from the packages we just installed:

Imported modules

A few lines below that we’ll begin the configuration.

Configuration

The i18next framework expects the resources for the different localizations. This is done with a key:value pairing of the translation and the actual text. Ideally, this would be split up into different locales, so for example in my app for German, Spanish, and English the resource object would look like this:

Initial resources object

To populate the resources I personally prefer to create a folder with the name locale and start putting in my translations in the folder:

Folder setup

Then I import them into the configuration file and set the values inside the resource object:

Populated resources object

A small example of a resource file (in JSON):



{   
    "about": "Über" 
}


Enter fullscreen mode Exit fullscreen mode

Afterward, we’ll build out the languageDetector, this part of the configuration will detect what language to display on the launch of the app:

languageDetector

Let’s break this down: The languageDetector object expects several properties. First, the type which indicates that it is a languageDetector. Afterward, we'll label it as an async process. The real meat and bones of this are the detect property, in my case, I have a Zustand store to obtain the language, important to use the callback function of the detect property to set it correctly.

This would take in the language code which corresponds directly to the resources we configured earlier. In my case, I don’t need the init functions or the cacheUserLanguage properties so I just leave them set to an empty function for Typescript purposes.

IMPORTANT : If you don’t have the language for the user stored in some other location and just want the one directly from the browser there is a package just for this!



npm install i18next-browser-languagedetector


Enter fullscreen mode Exit fullscreen mode

This will detect the language in the browser. Once installed you can import it from the package:



import LanguageDetector from 'i18next-browser-languagedetector';


Enter fullscreen mode Exit fullscreen mode

The final step is to create the i18n instance and export it!

Final configuration setup

Essentially, we just plug in all the properties we have previously configured. In the init function we set up a fallbackLng in case our languageDetector fails.

Final steps

In our root file where we initial render our React tree let’s go ahead and import our configuration file:



import './i18n';


Enter fullscreen mode Exit fullscreen mode

Now, you can go ahead and start calling the localization keys using the namespace and key with a hook provided by react-i18next:

Using the localization hook

common in this case is the sub-property of the resource object we set earlier to split up our localizations! Neat! and then I just call the key from the JSON file and it’ll display the correct translation.

SIDENOTE : You can go ahead and set the language dynamically with another property inside the returned value of the useTranslation hook:

Changing the language

If have any other way to configure the localization for your app or any feedback, leave it in the comments below!

More content at Relatable Code

Originally published at https://relatablecode.com on January 23, 2022.

Top comments (2)

Collapse
 
rxliuli profile image
rxliuli

You might be interested in the type definitions for generating translation files

npmjs.com/package/@liuli-util/roll...

Collapse
 
diballesteros profile image
Diego (Relatable Code)

Woah this seems super useful! Thanks for sharing.