This article will describe how you can set up the translation process for with in a few minutes with 5 simple steps. Create React App ttag 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 that works everywhere where and babel works. Supports out of the box. framework agnostic solution javascript jsx ttag works with standard, that is very common to translators and like transifex, weblate e.t.c gettext can be integrated with any workflow and translation services ttag does not require you to use some ‘alien’ formatting rules like . You just simply use for formatting like: sprintf native javascript template literals t`Hello ${ name }` At the end of this tutorial, we will setup for starter page. i18n CRA 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 file for each language that we want to translate to. We can use to create this file: .po ttag-cli mkdir i18nnpx ttag init uk i18n/uk.po will create file for the Ukrainian language ( is the language code). ttag init uk i18n/uk.po po uk 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 file and make phrase translatable: App.js Learn React 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 file we can use command from .po update ttag-cli npx ttag update i18n/uk.po src/ And we should see that our phrase was added to the file: Learn React uk.po msgid "Learn React"msgstr "" is the place where translation must be added: msgstr msgid "Learn React"msgstr "Вивчити React" Step 5. Loading translations On this final step, we should load and apply translations from the file. To be able to load file let’s convert it to format with : .po po json ttag-cli npx ttag po2json i18n/uk.po > i18n/uk.po.json Now we can load file with a simple import or require. uk.po.json The implementation of function depends on your requirements. You can choose to store locale in url, cookies, localStorage or some other place. Something like: getLocale 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 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 . repository doc Hope this will help someone to setup translation workflow with CRA. Any feedback is appreciated. Feel free to create and leave comments. issues 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

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Simple i18n for Create React App with ttag

Too Long; Didn't Read

Company Mentioned

Mostovenko Alexander

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Simple i18n for Create React App with ttag

Too Long; Didn't Read

Company Mentioned

Mostovenko Alexander

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES