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.
b.Create a file ‘locale.js’ and export the locales object.
2. Create the provider –
a.Now, let’s create the Provider to hook the IntlProvider to the application.
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 –
For French:- fr-CA.js –
c. Create an ‘js’ file under the MessageContent folder to export the messages.
MessageContent-> index.js –
3. Create a common translator –
a.Let us create a common Translate function to translate the message according to the locale.
i18n-> translate.js –
b.Create ‘index.js’ under the ‘i18n’ folder to export the locales and provider as default.
i18n-> index.js –
c.Finally, let us wrap the application with IntlProvider and set the locale in App.js.
src-> App.js –
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
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!