React Localization

In modern front-end technology internalization makes it easy to implement. Nowadays by using i18next and react i18next packages makes the localization easier. In this article, let’s see how to localize the website using React JS, i18next, and react - i18next packages.

 Packages Needed For Localization

  1.i18next ---a localization framework.
  2.react-i18next --React implementation of i18next library 

Install i18next and react-i18next packages as a dependency from terminal.

npm install --save i18next react-i18next
 

What is React-i18next? 

i18next is an internationalization-framework for React/React Native. It provides features such as plurals, context, interpolation format. It provides you with a complete solution to localize your product from web to mobile and desktop.React-i18next is a powerful internalization framework for React / React Native which is based on React-i18next  

Advantages:

1. Load translations
2. Optionally cache the translations
3. Flexibility to use other packages (eg:moment.js date formatting)
4. Scalability

Implementation steps for Localization

1.Initially create a folder named “translations” in the src directory, then create a language-wise folder in the translation folder. I have created two folders namely          
 en--English language
 de -- German language.

 Then add JSON files named common.json in those folders. These files would act as Resource for the “react-i18next” package.
             
   ../en/common.json Contains the English language mapping JSON  object    

   {
        "translations": {
             "paragraph": "Reagiere js",
                "author": {
                      "title": "Autorenname",
                      "value": "Andrea Chiarelli"
            }
    }
  }

2. Add the i18n.js file in the src folder to the application. In i18n.js. 

 import i18n from 'i18next'
 import languageEN from './tranlations/en/common.json'
  import languageJP from './tranlations/de/common.json'
     i18n
       .init({
           resources: {
                    en: languageEN,
                     de: languageJP
                              },
           lng: "en",
           defaultNS: "translations",
              })
       export default i18n;

• Initially Import all dependencies and the language JSON  files.
• resources is a JSON object, where a collection of all the translations needed for the application.
• By setting en as a value to the lang key helps to load the browser in the English language initially.
• (defaultNS) is the namespace for the starting point for translation where to get the key and value for translation.In our files, we use translations as a namespace to separate and start point for translations.

 3.Add the i18next provider in the index.js file so the whole application can get access to the Localization. The i18nextProvider takes an i18next instance through the props i18n.         
    //index.js
     ReactDom.render(
          <  i18nextProvider >
             < App  />
           <  i18nextProvider  />                                              
         )

4. Implement the Radio Button Group Control (For Changing the Language Functionality) into renderRadioButton() to the component at App.js file, so the user can easily switch Language through those radio buttons

// radio buttons
renderRadioButtons = () => {
      return (
          < input checked={this.state.value === 'en'}
           name="language " onChange={(en) => this.onLanguageHandle(e)}
            value="en" type="radio" />English
           < input   checked={this.state.value === 'de'}  name="language "
                 onChange={(en) => this.onLanguageHandle(e)}
               value="en" type="radio" />German
    )
}

On clicking the radio button it fires the onLanguageHandle() function.In this function we add this.props.i18n.changeLanguage() method.It accepts a new

Language as a parameter and it gets all the translations from the i18n.js file for the keys provided.

//for changing the language 
      onLanguageHandle = (event) => {
              let newLang = event.target.value;
              this.setState({ value: newLang })
              this.props.i18n.changeLanguage(newLang)
       }

Implement the localization function in render() function of App component.
Add the renderRadioButtons() in JSX syntax. So the Radio button groups will render. Then add the content inside the t function in react.js which serves as a key for other languages for Localization.
          
              {t(‘author.value’)}

    //render in App.js 
          render() {
               const { t } = this.props
           return ( 
                     {this.renderRadioButtons}
                   {t(''paragraph")}
                   {t('author.title')} ":"{t('author.value')}}
                    {t('description.title')} ":" {t('description.value')}
                   )
               }

When the radio button at the English will be triggered then the output will be seems:




When Germany triggers the output is: