At Transifex, we have been using 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. Transifex Native 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 tool but the process is the same with any kind of React application. Our simple guide will start with a few commands to install all the required dependencies. 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 and environment variables. They are linked to the Transifex resource. The TOKEN is considered a public key that can read from a Transifex resource and the SECRET will be used later in our tutorial in order to push strings for translation to a Transifex resource. REACT_APP_TRANSIFEX_SECRET REACT_APP_TRANSIFEX_TOKEN The prefix is there so that the React application can in client code. REACT_APP_ resolve them Adding the Code Now that we've installed everything we need, we can open and replace its contents with the following code: App.js React ; { tx } ; { T } ;

tx.init({ : process.env.REACT_APP_TRANSIFEX_TOKEN, : }); { ( <p><T _str="hello world" /></p>
    </>
  );
}

export default App; import from 'react' import from '@transifex/native' import from '@transifex/react' token sourceLocale 'en' ( ) function App return <> 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 component. This is what marks a string that is translatable. We add our string to the attribute and when we push in a later stage this will be available in Transifex as a translatable string. <T> _str Here’s the result of what we built: Let’s also add a simple language picker with this code: React ; { tx } ; { T } ;
 
 tx.init({ : process.env.REACT_APP_TRANSIFEX_TOKEN, : }); { ( <p><T _str="hello world" /></p>
+      <button onClick={() => tx.setCurrentLocale('en')}>English</button>
+      <button onClick={() => tx.setCurrentLocale('el')}>Greek</button>
     </>
   );
 } import from 'react' import from '@transifex/native' import from '@transifex/react' token sourceLocale 'en' ( ) function App return <> 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 component and we added two buttons to change languages, but as of now, this does nothing yet. The current state in Transifex Platform for our project is the following: We have one language: <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 \
    - - - src -token=$REACT_APP_TRANSIFEX_TOKEN \ -secret=$REACT_APP_TRANSIFEX_SECRET \ -verbose \ 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...
⸨████████████████████████████████████████⸩ / /src/setupTests.js
✓ Processed file(s) and found translatable phrase.
✓ Content detected file(s).
/src/App.js
  └─ adb6d4ba2eded700fd14e66100fcf268: hello world
    └─ occurrences: [ ]
Uploading content to Transifex... Success
✓ Successfully pushed strings to Transifex.
Created strings: Updated strings: Skipped strings: Deleted strings: Failed strings: Errors: 5 5 5 1 in 1 "/src/App.js" 1 0 0 0 0 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! React ; { tx } ;
- { T } ;
+ { T, useLanguages } ;
 
 tx.init({ : process.env.REACT_APP_TRANSIFEX_TOKEN, : }); {
+ languages = useLanguages(); ( <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; import from 'react' import from '@transifex/native' import from '@transifex/react' import from '@transifex/react' token sourceLocale 'en' ( ) function App const return <> 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 ? You can check out the code and of course, contribute to open-source 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

Start your 15-day Free Trial

Too Long; Didn't Read

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

How To Localize A React Application Using Transifex Native

Too Long; Didn't Read

People Mentioned

Company Mentioned

transifex

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Localize A React Application Using Transifex Native

Too Long; Didn't Read

People Mentioned

Company Mentioned

transifex

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES