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:
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
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
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
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
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"
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)
)
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!