How To Localize A React Application Using Transifex Native

At Transifex, we have been using Transifex Native for some time now to localize our React applications and we would like to showcase how easily you could do it in your application too.

Why should you care about Transifex Native? Because Transifex Native is a redesign of the localization stack. Some of the traits of this new approach include:

• A unified localization syntax across all your projects.
• Ability to easily push content from your development or production environment.
• Transifex Native uses Over The Air (OTA) content delivery which means no need for files or back and forth between engineering and localization departments. It just works!

But let's just go ahead and jump into the code and see what we can accomplish with a few lines of code and some terminal commands.

Installing Dependencies

We are going to showcase a simple React app with the help of the

create-react-app 

npx create-react-app txnative-demo
cd txnative-demo
npm install --save @transifex/native @transifex/react @transifex/cli
npm start

Next, we need to make sure we have the

REACT_APP_TRANSIFEX_SECRET

REACT_APP_TRANSIFEX_TOKEN

The

REACT_APP_

Adding the Code

Now that we've installed everything we need, we can open

App.js

import React from 'react';

import { tx } from '@transifex/native';
import { T } from '@transifex/react';

tx.init({ token: process.env.REACT_APP_TRANSIFEX_TOKEN, sourceLocale: 'en' });

function App() {
  return (
    <>
      <p><T _str="hello world" /></p>
    </>
  );
}

export default App;

Nothing fancy here right? We import our libraries, initialise Transifex Native with a token, and the project's source language.

The most interesting thing here is the

<T>

_str

Here’s the result of what we built:

Let’s also add a simple language picker with this code:

import React from 'react';
 
 import { tx } from '@transifex/native';
 import { T } from '@transifex/react';
 
 tx.init({ token: process.env.REACT_APP_TRANSIFEX_TOKEN, sourceLocale: 'en' });
 
 function App() {
   return (
     <>
       <p><T _str="hello world" /></p>
+      <button onClick={() => tx.setCurrentLocale('en')}>English</button>
+      <button onClick={() => tx.setCurrentLocale('el')}>Greek</button>
     </>
   );
 }
 

We added two buttons that set the current language:

Pushing Strings

What we’ve done up until now is just hack our way through the code. We’ve marked our strings for translation with the

<T>

And one resource with no strings inside:

The next step is to push our translatable content to Transifex. This could be achieved with one command in our terminal:

npx txjs-cli push \
    --token=$REACT_APP_TRANSIFEX_TOKEN \
    --secret=$REACT_APP_TRANSIFEX_SECRET \
    --verbose \
    src

After we run this command we get an informative report about the strings that were parsed and pushed to Transifex:

Parsing all files to detect translatable content...
⸨████████████████████████████████████████⸩ 5/5 /src/setupTests.js
✓ Processed 5 file(s) and found 1 translatable phrase.
✓ Content detected in 1 file(s).
/src/App.js
  └─ adb6d4ba2eded700fd14e66100fcf268: hello world
    └─ occurrences: ["/src/App.js"]
Uploading content to Transifex... Success
✓ Successfully pushed strings to Transifex.
Created strings: 1
Updated strings: 0
Skipped strings: 0
Deleted strings: 0
Failed strings: 0
Errors: 0

If we refresh the editor page we will see that we have one string available for the translation! Let’s translate this string:

If we refresh our application and click on the “Greek” button we should see content translated:

Toggling between languages we see that the translations are loaded without the need for an application reload!

Taking It Up a Notch

Our current language picker is hardcoded, so each time we add a new language we have to manually add a new button to our application. That’s boring. Let’s automate it!

import React from 'react';
 
 import { tx } from '@transifex/native';
-import { T } from '@transifex/react';
+import { T, useLanguages } from '@transifex/react';
 
 tx.init({ token: process.env.REACT_APP_TRANSIFEX_TOKEN, sourceLocale: 'en' });
 
 function App() {
+  const languages = useLanguages();
   return (
     <>
       <p><T _str="hello world" /></p>
       <button onClick={() => tx.setCurrentLocale('en')}>English</button>
-      <button onClick={() => tx.setCurrentLocale('el')}>Greek</button>
+      {languages.map(({ code, name }) => (
+        <button key={code} onClick={() => tx.setCurrentLocale(code)}>
+          {name}
+        </button>
+      ))}
     </>
   );
 }
 
 export default App;

Simple changes again. We get the available languages from Transifex and we loop through these languages to create our switcher dynamically. Keep in mind that this is the last time we will change the code of our application!

Let’s try and add a new language to Transifex and see what happens to our React application:

And translate our new string to French:

Let’s see what changed if we refresh our application.

Voila! We got the new language without changing our code and the translation is available.

Wrapping Up

We’ve only touched the surface of Transifex Native but we managed to have a lot of progress in three simple steps:

• Mark our strings for translation through our code.
• Run a command to send these strings to Transifex.
• Translate.

Not bad for ten minutes of work!

If you want to try it yourself and see all the benefits of Transifex Native, you can express your interest here https://www.transifex.com/native/

And did we also mention that all this code is open-source?
You can check out the code and of course, contribute to https://github.com/transifex/transifex-javascript/

Thanks for reading and we hope we could save you some time during your next localization project!

(Co-authored by Thanos Kolovos and Konstantinos Bairaktaris)