i18n for react applications

This post is first in the series of react i18n integration.

What is i18n and why is it required?

Internationalization(i18n) is the design and development of a product, application or document content that enables support for local languages and cultural settings.

What all topics are covered in the series.

• Installation
• Configuring i18n for react
• Exposing API using React provider
• Binding translations to views

Tech

• i18next - internationalization-framework for JavaScript.
• react-i18next - Provides framework binding for react.

Alright enough Bla Bla. Let's get started with some action.

Installation

$ npm install react-i18next i18next --save

Wouldn't it be nice if our react application can do the following

• Detect language based on geography.
• Load our translation from a external file.
• Store those contents in a cache or localStorage. let's add that capability by installing...

$ npm install i18next-browser-languagedetector i18next-xhr-backend i18next-localstorage-backend i18next-chained-backend

For a smaller application one wouldn't mind storing translations inside config file.

However, For a large applications this won't be an ideal solution.

Hence, to address this we will create locale folder inside the public directory that holds all our translations. For the sake of this tutorial our application will support English (EN) and Spanish (ES).

. public
    ├── locales
        ├── en
            ├── common.json
            ├── terms.json
            ├── home.json
        ├── es
            ├── common.json
            ├── terms.json
            ├── home.json

As you can see, In the above folder structure we have multiple JSON files for each locale. The common.json file contains all translation that are common across multiple routes. terms.json and home.json holds translated content for terms and home routes respectively.

The reason behind choosing i18next was it provides ecosystem containing various tools for integration with different languages and framework. Same learnings can be applied for other languages as well.

Now that we are done with the installation, we will now look into how the above pieces are connected together to make a config file.

Find the github repo containing all codes mentioned in this series here