React i18n Internalization

In this, we will learn about the react internalization and a demonstration of how you can implement internalization in your react app.

snapshot of implemented i18n

# What is Internalization (i18n)?

Internalization is the process or technique of describing something according to the end-users in many countries or you can say in many languages.
Here, Internalization means constructing a web app with the support of multiple languages according to geolocation.

In this article, we will create a react demo app and then we will implement i18n ( react-intl ) in our app and give multiple language support ( English, German, and French ).

Let's get started.

Step 1: Create an app “i18n-demo”

To start this, we need to create a demo app using the below command, let’s run the below command and create a demo app:

npx create-react-app i18n-demo
cd i18n-demo

Also, let’s install the following npm packages which we will use in our app:

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:

snapshot of URL http://localhost:3000

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:

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- English, German, and French In this app.

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

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

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

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.'
   }
}

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

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.'
   }
}

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

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.'
   }
}

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

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

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:

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 style={{ 'margin': '0 auto', 'width': '200px', maxWidth:'200px','padding-bottom': '15px' }}>
            <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';

Creating a function component App:

function App() { }

Using “useState” hook to create a state for our functional component, we are creating a “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 selecting the 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 />”. 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.

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 “npm start” and open the browser and see the result. 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 choosing the language. after selecting the language the content of the app will be changed as in the below gif:

snapshot of implemented i18n

Congratulation, you did it.

Conclusion:

In this article, we learned about internalization and how we can implement internalization ( i18n ) in the react app.

Read this article for the basics of hooks and this article will help to understand more about hooks. If you’re interested in Node.js or JavaScript, then this link will help.

Thank you for taking the time to read this article. If you like and learned something from this article, click the 👏🏻 icon so other people will see this here on Medium.