How to implement Internalization (i18n) in react app?

Let's get started and implement internalization (i18n) in react app.

---

Step 1: Create a React app:

 npx create-react-app i18n-demo

 cd i18n-demo 

 npm install react-intl react-select 

 npm start 

---

Step 2: Open localhost:3000 in the browser:

Check your current port ( here default port is 3000 ) and confirm its working as:

Source: idkblogs.com

---

Step 3: Start writing code for i18n support:

Create a folder “i18n” in the “src” folder and create a file “locales.js”. In the locales.js we keep our data like what language support we will add for our app. So let’s write the code in locales.js:

locales.js:

 
                       // locales.js
                       export const LOCALES = {
                         ENGLISH: 'en-US',
                         GERMAN: 'de-de',
                         FRENCH: 'fr-ca' 
                       }  
                     

According to the above codes, you can see, we are going to support 3 languages in this demo. The languages are:
English
German
French

---

Step 4: Create a folder “messages” inside i18n folder ( src/i18n/messages) :

In this, we need to create multiple files as following:

a): Create a file “en-US.js” inside location “src/i18n/messages” and write the below code in this file:

 
                         //en-US.js
                     
                         import { LOCALES } from '../locales';
                         
                         export default {
                           [LOCALES.ENGLISH]: {
                             'hello': 'Hello World',
                             'edit': 'This example is created by {name}',
                             'message':'Internalization means adapting computer software to different languages. You have ability to switch between multiple languages.'
                           }
                         }  
                       

In the above codes, we are importing the supported languages from file locales.js, and we are creating our messages to display in our component and we are exporting it by default. We need to create 2 files for the other two languages ( German and French ).

b): Create a file “de-DE.js” inside location “src/i18n/messages” and write the below code :

 
                    //de-DE.js
                    import { LOCALES } from '../locales';
                    
                    export default {
                     [LOCALES.GERMAN]: {
                       'hello': 'Hallo Welt',
                       'edit':'Dieses Beispiel wurde von {name} erstellt',
                       'message':'Internalisierung bedeutet, Computersoftware an verschiedene Sprachen anzupassen. Sie können zwischen mehreren Sprachen wechseln.'
                     }
                    }
                     

In the above code, we imported the "LOCALES" from "locales.js". and we describe the words in german language:
eg.
"Hellow World" in german-
"Hallo Welt".

"This example is created by {name}" in german-
"Dieses Beispiel wurde von {name} erstellt".

"Internalization means adapting computer software to different languages. You have ability to switch between multiple languages." in german-

"Internalisierung bedeutet, Computersoftware an verschiedene Sprachen anzupassen. Sie können zwischen mehreren Sprachen wechseln.".

c): Create a file “fr-CA.js” inside location “src/i18n/messages” and write the below codes:

                     //fr-CA.js
                    import { LOCALES } from '../locales';
                    
                    export default {
                     [LOCALES.FRENCH]: {
                       'hello': 'Bonjour le monde',
                       'edit':'Cet exemple est créé par {name}',
                       'message':'L\'internalisation signifie l\'adaptation de logiciels informatiques à différentes langues. Vous avez la possibilité de basculer entre plusieurs langues.'
                     }
                    }
                     
                    

In the above code, we imported the "LOCALES" from "locales.js". and we describe the words in French language:
eg.
"Hellow World" in French-
"Bonjour le monde".

"This example is created by {name}" in French-
"Cet exemple est créé par {name}".

"Internalization means adapting computer software to different languages. You have ability to switch between multiple languages." in French-

"L'internalisation signifie l\'adaptation de logiciels informatiques à différentes langues. Vous avez la possibilité de basculer entre plusieurs langues.".

Now, let’s create a file to export all the above 3 files together in “index.js”:

d): Create a file “index.js” inside message to export combined and write the below codes:

                     // index.js
                     
                     import en from './en-US';
                     import de from './de-DE';
                     import fr from './fr-CA';
                     
                     export default {
                       ...en,
                       ...de,
                       ...fr
                     }
                       

---

Step 5: Go to the “src/App.js” and delete all codes and write the below code:

                          
                         // src/App.js
                         import React, { useState } from 'react';
                         import './App.css';
                         import Select from 'react-select';
                         import { LOCALES } from './i18n/locales';
                         import { FormattedMessage } from 'react-intl';
                         import { IntlProvider } from 'react-intl';
                         import messages from './i18n/messages';
                         
                         function App() {
                           const [locale, setLocale] = useState(LOCALES.ENGLISH);
                         
                           function changeLocale(lang) {
                             setLocale(lang.value)
                           }
                         
                           const options = [
                             { value: LOCALES.ENGLISH, label: 'English' },
                             { value: LOCALES.GERMAN, label: 'Germon' },
                             { value: LOCALES.FRENCH, label: 'French' },
                           ];
                         
                           return (
                            <IntlProvider locale={locale} messages={messages[locale]}>
                              <div className="App">
                                <div>
                                  <h3> Select language:</h3>
                                  <Select options={options} onChange={(e)=> changeLocale(e)} autoFocus={true}></Select>
                                  <hr /> <br /> <br /> <br />
                                </div>
                                <FormattedMessage id="hello" />
                                <p>
                                  <FormattedMessage id="edit" values={{ name: 'Shubham Verma' }} />
                                </p>
                                <p>
                                  <FormattedMessage id="message" />
                                </p>
                              </div>
                            </IntlProvider>
                      );
                      }
                      export default App;
                      
                      

Let’s understand the code first:

We are importing the necessary things for our component:

                       import React, { useState } from 'react';

                       import './App.css';

                       import Select from 'react-select';
import { LOCALES } from './i18n/locales';

                       import { FormattedMessage } from 'react-intl';

                       import { IntlProvider } from 'react-intl';

                       import messages from './i18n/messages';

                     

In the above code:

Creating a function component App:

function App() { }  

Using “useState” hook to create a state for our functional component, we are creating “locale” with the default value “en-US” and get the reference of a function to update the function.

const [locale, setLocale] = useState(LOCALES.ENGLISH);  

A handler function “changeLocale” will be called when you change the selection by select dropdown:

                       function changeLocale(lang) {
                       setLocale(lang.value)
                       }
                     

These are the options for dropdown:

                       const options = [
                       { value: LOCALES.ENGLISH, label: 'English' },
                       { value: LOCALES.GERMAN, label: 'Germon' },
                       { value: LOCALES.FRENCH, label: 'French' },
                       ];
                     

The things we need to focus on are “IntlProvider” and “FormattedMessage” tags. IntlProvider is a component and it is a wrapper to wrap your root component. You need to wrap your root component to get the advantage of internalization. We need to configure it with the locales and with the translated strings or messages.

FormattedMessage is used to display the message according to the specific Id. By default, FormattedMessage renders the string into a "React.Fragment", below is the syntax of FormattedMessage:

                       <FormattedMessage id='app.header' 
                       description='This is the header message' 
                       defaultMessage='Welcome, {name}!'
                         values={{ name: 'Reader' }} 
                       />
                     

---

Step 6: Run the app:

Now run the app using command

npm start

and open the browser and see the result:

Source: idkblogs.com

You can see in the browser, our app is working file. In the browser, you can see the default language is English and when you click on the select box, you will have 3 options for choose language. after selecting the language the content of the app will be changed as in the below gif:

Source: idkblogs.com

Congratulation..

---

Conclusion:

In this article, we learned about the internalization and how we can implement internalization ( i18n ) in the react app. Also learned how we can add the multi language support.
Now you'll be able to develop and work on i18n or internalization module in any react based application.