Simple i18n for Create React App with ttag

This article will describe how you can set up the translation process for Create React App with ttag in a few minutes with 5 simple steps.

First of all, there are at least 4 reasons why you should choose ttag with CRA:

• Doesn’t require to execute eject.
• ttag is the framework agnostic solution that works everywhere where javascript and babel works. Supports jsx out of the box.
• ttag works with gettext standard, that is very common to translators and can be integrated with any workflow and translation services like transifex, weblate e.t.c
• ttag does not require you to use some ‘alien’ formatting rules like sprintf. You just simply use native javascript template literals for formatting like:

t`Hello ${ name }`

At the end of this tutorial, we will setup i18n for CRA starter page.

Demo site — https://ttag-org.github.io/CRA-runtime-example/

Repository — https://github.com/ttag-org/CRA-runtime-example

Step 1. Installation

On this step, we will simply set up new CRA and install ttag:

npx create-react-app ttag-appcd ttag-appnpm i ttagnpm i -D ttag-cli

Step 2. Create .po file for translations

You can read more about gettext and .po files format here

According to gettext, we need to create a separate .po file for each language that we want to translate to. We can use ttag-cli to create this file:

mkdir i18nnpx ttag init uk i18n/uk.po

ttag init uk i18n/uk.po will create po file for the Ukrainian language (uk is the language code).

You can find the list of all available language codes here — https://www.w3.org/International/O-charset-lang.html

Step 3. Wrapping strings with tags

To make strings translatable you should mark them with tags. Let’s open App.js file and make phrase Learn React translatable:

import { t } from 'ttag'

// Change 'Learn React' tot`Learn React`

There is also [_jt_](https://ttag.js.org/docs/jsx-gettext.html) tag that can contain nested jsx elements

Step 4. Updating translations file

To make strings to appear in the .po file we can use update command from ttag-cli

npx ttag update i18n/uk.po src/

And we should see that our phrase Learn React was added to the uk.po file:

msgid "Learn React"msgstr ""

msgstr is the place where translation must be added:

msgid "Learn React"msgstr "Вивчити React"

Step 5. Loading translations

On this final step, we should load and apply translations from the .po file. To be able to load po file let’s convert it to json format with ttag-cli:

npx ttag po2json i18n/uk.po > i18n/uk.po.json

Now we can load uk.po.json file with a simple import or require.

The implementation of getLocale function depends on your requirements. You can choose to store locale in url, cookies, localStorage or some other place. Something like:

function getLocale() {return cookie.get(LOCALE_COOKIE) || 'en';}

Here is my example of [_i18nInit_](https://github.com/ttag-org/CRA-runtime-example/blob/master/app/src/i18nInit.js)_.js_

I would recommend to move i18n setup to a separate module and import it before any other imports at the top of the entry point of your app (somewhere in [src/index.js](https://github.com/ttag-org/CRA-runtime-example/blob/master/app/src/index.js))

And that’s it!

In the end, you should also set up some languages switch logic. You can refer to the example repository for the details on how to do that. As a bonus, ttag also allows you to precompile translations on a build step. You can read about how to do that in the doc.

Hope this will help someone to setup translation workflow with CRA. Any feedback is appreciated. Feel free to create issues and leave comments.

Happy coding!

Links:

• The official doc for ttag and CRA — https://ttag.js.org/docs/create-react-app.html
• ttag lib — https://github.com/ttag-org/ttag
• babel-plugin-ttag — https://github.com/ttag-org/babel-plugin-ttag
• ttag-cli — https://github.com/ttag-org/ttag-cli