Blog
How to implement Internationalization for a React Application
DATE:

Internationalization of an application, document or product refers to the development of easy content localization, i.e. modifying the content to target the language and culture of the region. Internationalizing an application leads to improved usability by people located across the globe.

There are two main aspects to internationalization, firstly the detection of the user’s local language, and secondly the modification of the content, including translation of the text, and switching relevant items such as currency.

This article addresses how to implement the internationalization of a React application using the library ‘React-intl’. The first step is to create a new React project and add the intl package:

  • Create a React project using the commands –

$ npx create-react-app project_i18n

         $ cd project_i18n

  • Add the ‘react-intl’ package.

Configuration of the package consists of four main steps: creating the locales, creating the provider, and finally creating a common translator. In the remainder of this article, I will elaborate on these steps.

1. Create the locales –

a.Create a folder with the name ‘i18n’ in your code folder.

i18n folder 2

b.Create a file ‘locale.js’ and export the locales object.

locale js3

2. Create the provider –

a.Now, let’s create the Provider to hook the IntlProvider to the application.
INTLprovider4
In the above image, IntlProvider is imported from react-intl and a wrapper is created for the application, setting the default locale and passing the message content according to the locale.

b.To create the messages for the respective languages, create a folder called ‘MessageContent’ and create the locale files for messages within that folder.
Let us create two different message objects.
For English: – en-US.js –

EN-US5

For French:- fr-CA.js –

FR-CA 6

c. Create an ‘js’ file under the MessageContent folder to export the messages.
MessageContent-> index.js –

Messagecontent 7

3. Create a common translator –

a.Let us create a common Translate function to translate the message according to the locale.
i18n-> translate.js –

Commontranslator8

b.Create ‘index.js’ under the ‘i18n’ folder to export the locales and provider as default.
i18n-> index.js –

index.js9

c.Finally, let us wrap the application with IntlProvider and set the locale in App.js.
src-> App.js –

wrappingapp10

Example for French Locale –

fr-CA.js

export default {

[LOCALES.FRENCH]: { ‘hello’: ‘Bonjour’, ‘userName’: ‘le nom d\’ utilisateur est {uname}’

}

};

translate.js

const translate = (id, value={}) => <FormattedMessage id={id} values={{…value}}/>

d. We are looking for the following output:

translate(‘hello’)  => Bonjour

translate(‘userName’, {‘uname’: ‘Sam’}) => le nom d’ utilisateur est Sam

Bonjour11

Internationalization can be achieved in react application by using ‘React-intl’ with minimal development efforts for handling multiple languages.

MetaSys has developed custom React solutions for clients across various industries and geographies. If you have any questions on internationalization in your React projects, then please feel free to contact us. Happy coding!


TAGS:


Leave a Reply

Your email address will not be published. Required fields are marked *

MetaSys Software
Contact Contact