Internationalization of Your React App

One of the most common tasks for developers is website/app localization. Having a website available in multiple languages means more of your users can happily navigate in their native language.

You can attract new users that speak a different language to your app or page, and thus expand your active users.

A popular approach to solve it is using the i18n package (an abbreviation for the word "internationalization") in JavaScript but we'll look into some alternatives using React.

Manual Approach

The manual approach doesn't rely on external packages but on vanilla JavaScript.

First, let's create a dictionary:

const dictionary = {
  es: {
    "hello_world" : "Hola Mundo"
  }
}

Then we can use a function to get the translation if it exists:

function localize(locale, message) {
 if (dictionary[locale] && dictionary[locale][message]) {
   return dictionary[locale][message]
 }
 return message
}

The function needs to be exported so that it can be reused it anywhere in the app. Then this is how we'll print the translation:

<p>{localize("es", "hello_world")}</p>

I18n Approach

The I18n package helps to manage translations by loading them from dictionary files, so that they can be exposed in the JS code.

Let's install the I18n package via npm:

npm install i18n --save

Then we'll have to create the dictionary file, so that it can be consumed later by I18n. So, let's create it as a YAML file:

en:
hello_world: Hello World
es:
hello_world: Hola Mundo

Now, let's load the locales and the dictionary file:

import I18n from 'i18n';

i18n.configure({
  locales:['en', 'es'],
  directory: __dirname + '/locales'
});

Last, let's print the translation:

<p>{I18n.t("hello_world")}</p>

For more details you can visit this page

Babel Macros Approach

Using the Babel macros package we can integrate translations into React components. That way we can set the code to load the singular or plural translation automatically with a single keyword.

Let's install the Babel macros package:

npm install --save babel-plugin-macros

or

yarn add babel-plugin-macros

We will use the same content for dictionary file that we used in the previous example:

const dictionary = {
  es: {
    "hello_world" : "hola mundo",
    "dog": "perro",
    "dogs": "perros"
  }
}

Then we'll import the Trans component from Macro:

import { Trans } from "@lingui/macro"

Last, this is how we'll print the translation text:

<Trans>hello_world</Trans>

We can also print plural translations. We just need to tell the component what keyword will be used when singular and when plural.

import { Plural } from "@lingui/macro"
<Plural
  value={count}
  one="dog"
  other="dogs"/>

Closing Thoughts

App Internationalization is an essential feature to reach a larger market and potential clients. To internationalize a React app my favorite approach is Babel macros because it provides a cleaner and intuitive syntax in my opinion, you can take advantage of components to use the features like plurals in your translations.

Are you planning to internationalize a React application?