React Multi-language feature using i18n or internationalization

ReactJS doesn't have built-in features to finish your Multilanguage Feature on your website. But there have an amazing NPM package called react-i18next is based on i18next. So let's get started.

Step 1: install the packages

npm install react-i18next i18next

Step 2: Create the file structure

I hope you will write text/data in the translations.js like this

The config.js file contains the set up for the i18n instance. The two JSON files will hold the text that goes in the app. en for English and es for Spanish. If you are following along, create the file structure in the boilerplate.

Step 3: Configure the i18n instance

The i18n instance will hold all of your translations, the current language, and other info and methods needed. You can configure it in the config.js file like this:

At the top, import the necessary dependencies. Next, the use(initReactI18next) will bind react-i18next to the i18n instance.

The first two properties of the init object parameter are a fallback language (fallbackLng) and default language (lng). I set both of these to English (en).

The resources are the JSON files with the translations that you created in the last step. The namespaces (ns) and default namespace (defaultNS) are the keys from the resources object.

You can split your translations into multiple files (namespaces) if you have a large app to simplify the files. In which case, you would add more than just the one file in the resources object and add it to the namespaces array. This app is small, so all the translations can go in one file.

Step 4: Add the i18n instance to your app

In the index.js file of the boilerplate, which contains the entire app, import the i18n instance you created like this:

Step 5: Change language function

Last Step : Now let's use them

I hope everything is working
Thank you

Comments

[Florian Kiem]

Hi! It's a super cool guide. Thanks for this multilang-tutorial.
I'm working for a company called inlang and we're creating an ecosystem for globalization. Have you ever heard about it? It is compatible with a lot of libraries such as react-i18next (i18next which we have a plugin for) and more, it could be very interesting to adopt in such usecases e.g. for editing messages visually with this tool we've created: inlang.com/m/tdozzpar/app-inlang-e...