What is Localization (i10n) ?

Localization refers to the process of adapting the document, website, application, or product to a specific locale i.e. to the language, culture, and other requirements of a specific market. Localization is sometimes written as l10n, where 10 is the number of letters between l and n.

What is Internationalization (i18n) ?

Internationalization is the process of designing and developing a software product in such a way that it can adapt to different locales and regions. It involves enabling different languages, accepting different types of data and settings to match local customs, and processing them correctly. Internationalization is sometimes written as l18n, where 18 is again the number of letters between l and n.

i18next ??

i18next is an international framework written in javascript for websites so that it can easily adapt to different regions and languages. The i18next community created integrations for several frontend frameworks such as React, angular, and vue.js. Today we are going to know about the react-i18next framework and implement a simple app and localize it.

What is react-i18next ?

Docs Says -

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

Setup for react-i18next ->

first of all, we will need to install two packages - react-i18next and i18next through the below command

  npm install react-i18next i18next --save

Once it get installed we need to configure a few things

You can create an i18n.js file next to your index.js file and write the configurations there but for the sake of convenience, we will continue configuring it in the same file App.js In your app.js file import the below two things

import i18n from "i18next";
import { useTranslation, initReactI18next } from "react-i18next";

and then we need to use few methods for setting up the languages for different locales

 i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        advice: "An apple a day keep the doctor away "
      }
    },
    hn: {
      translation: {
        advice: "दिन में एक सेब डॉक्टर को दूर रखें"
      }
    },
    sp: {
      translation: {
        advice: "Una manzana al día mantiene alejado al médico"
      }
    }
  },

  lng: "sp",
  fallbackLng: "hn",
  interpolation: {
    escapeValue: false
  }
});

i18n.use() passes i18n down to react-i18next and the .init() takes an object. Inside this object we have few keys like resources, lng, fallbackLng and interpolation and inside of the resource we have another set of other objects for different languages for example here we have en for English, hn for Hindi and sp for Spanish. The translation is another key for writing key-value pair of translations you want for a particular thing.

Now in lng we are setting the language for website for a specific locale. fallbackLng is for the default language or fallback language in case it doesn't find the language specified in lng attribute.

interpolation is used for escaping from XSS attacks. By doing it false we can escape from this attack.

Read more about it here

Now we are ready to localize our app. For that, we will be using useTranslation hook provided by react-i18next

const { t } = useTranslation();

This t function is responsible for translating the content provided into the chosen language so using t function we can print the message anywhere we wanted.

 <h2>{t("advice")}</h2>

here the language we provided is Spanish so the result will be something like this.

We can anytime change the language. Here we have 3 languages English, Hindi, and Spanish we can write as many languages as we want and then set it to language key as a value.

Suggestion - We can create a JSON file for different languages and then import and use it here because in real-case scenarios it's not just one line or word we will localize.

For a complete Solution do refer to this Sandbox

Advantages of localization

• The biggest Advantage is our app will be available to people worldwide. If we try to market an app that is not localized in the international market there is a high possibility that the audience will not be interested in our app which is not in their language.

• Although English is world wide language, still there are many people in the world who don't know English or not even heard about it, so localizing apps in their language will help the app spread better and hence help in better bussiness opportunities.

• The reason for the popularity of Google and not Baidu worldwide, yes Baidu, it's is a search engine very popular in china, 90-95% of people there only use Baidu for their day-to-day use is that Google is localized to the international market and Baidu is not making it limited to China only.

Hope you enjoyed reading about localization and Internalization. Thanks for staying up to here with me. See you in the next blog 😇😇. Until that