create-react-app i18n the easy way

Photo by Siriwan Srisuwan on Unsplash

So, you want get your react app multilingual the easiest way possible and still use create-react-app , I will be sharing my recipe for this in this article .. I hope you will enjoy it :).

Choosing the right library (react-intl)

There are a bunch of I18n libraries for react, the one is we are going to use is react-intl , why?

Setting up the react app to work with any I18n requires the same amount of effort and focus, but what sets react-intl apart is the set of tools that comes along with it specifically those two:

1- This one is a babel plugin that automatically detects translation text and extract it to .json file.

2- this tool helps creating translations files for each language and let you know about the status of your translations.


So, Enough with the talk and lets start writing code ….

Create the react app

you can skip this part if you are already familiar with create-react-app

So, first we will start with the create-react-app command in terminal:

create-react-app react-intl-example

Then when it’s all done we run the app:

cd react-intl-example
yarn start
This is a record of the terminal session creating the react app
And now we our default create-react-app home page

So, what’s our goal here?

  • We need to translate the content of this page into two languages at least.
  • Add a language selector to the page.
  • Manage our translations using the tools for react-intl

Setting up react-intl

1 — install the packages:

yarn add react-intl

2 — Create an AppWrapper component wrapping <App /> with IntlProvider

3 — Hook up existing App component with react-intl using injectIntl HOC and extract messages to a messages variable

So, what does defineMessages do?

It enables https://github.com/yahoo/babel-plugin-react-intl to pick up the messages defined in the object passed to it and extract it to json file to be used later.

All that remains now is to setup the tools for creating the translation json file and add the switch language button.

Setting up the tools and workflow

1 — install the packages:

yarn add react-intl-translations-manager react-intl-cra --dev

2 — Setup react-intl-translations-manager:

  • For that we follow the instructions at here:
  • Create translationRunner.js file in the root directory of our project:

3 — Add commands to the scripts section of package.json

"extract:messages": "react-intl-cra 'src/**/*.{js,jsx}' -o 'src/i18n/messages/messages.json'",    
"manage:translations": "node ./translationRunner.js"
Here’s how the final package.json looks like

4 — Now we let the magic happen… we will create separate json file for every language.

4.1 — Extract the messages defined in every defineMessages method of react-intl inside our src directory

yarn extract:messages

result:

yarn extract:messages v0.21.3
$ react-intl-cra 'src/**/*.{js,jsx}' -o 'src/i18n/messages/messages.json'
src/**/*.{js,jsx} -> src/i18n/messages/messages.json
Done in 1.21s.

This will create this file src/i18n/messages/messages.json with content of every `defineMessages` method.

For our project it will look like this:

4.2 — Now we will create a separate messages file for each language

yarn manage:translations
Now we are ready to start to do some translations!

In our locales directory we create an index file for all the translations:

5 — Hook up translations to IntlProvider in AppWrapper component and enable switching languages.

You can switch language using state or redux but I am using url just for demo

5.2 — Add links to switch languages

Et, Voila

Now we have our create-react-app multilingual.

Arabic
English
Spanish

And this is how you implement I18n in create-react-app the easy way.

Live website: https://shalkam.github.io/cra-intl-example/

Full code available at github:


If you like my work and need help with your project, feel free to hire me @Upwork https://www.upwork.com/freelancers/~01550dae2c8e8c0c74