React Localization With Transifex Native: All you Need to Know

If you are just getting started with localization on your React application, you are probably considering a custom JSON approach that will hold all your strings or the React-i18next framework, which manages strings for you. In both cases, you will end up needing a JSON file that holds all your translatable content. Both solutions introduce new files that need management or automation on your side.

In this post, we will guide you on how to implement React localization and internationalization. More specifically, we will focus on an alternative called Transifex Native, which you can simply use in your code with no additional work on your side. All translatable content is managed by Transifex Native and all translation updates are served over the air, with additional caching and grouping functionality that you control.

Installation

To start using Transifex Native, you will need to install the Transifex Native javascript SDK and the additional React components library to your code. After that, you have to create a Transifex Native project in the Transifex application. The Transifex project will provide the required credentials for linking your application to the content delivery system (CDS) that will serve all your content.

Having concerns about SEO and Native SDK?

Transifex Native is agnostic to your app’s rendering method. So, it works both for front-end and back-end rendering.

The Internationalization Process

With the SDK in place, you can start using the provided functions in your code. The Native SDK offers the T function to mark strings for localization. The T function is available as a React component and a javascript function. Let’s see an example for each.

import React, { Component } from 'react';
import { t } from '@transifex/native';
import { T } from '@transifex/react';

class Example extends Component {
  render() {
    const user = 'Joe',
	  js_warning = t('There was an issue rendering this page: <b>{this.props.code.number}</b>');
    return (
      <div>
        <span className={this.props.code.type}>{js_warning}</span>
        <T _str="Hello world" />
        <T _str="Hello {username}" username={user} />
      </div>
    );
  }
}

As you can see in the example above, you can pass attributes to the T function, like variables. Other attributes available are key identifier, tags, character limit, comments, and context. These attributes will be available to the localization team as additional context to do their work better.

You can also define pluralized strings using the ICU syntax inside your strings, like in the example below.

class Example extends Component {
  render() {
    return (
      <div>
        <T _str="{total_guests, plural, offset:1
        =0 {No errors found.}
        =1 {{num} error found.}
        other {{num} errors found.}}" num={this.props.errors.count} /> 
      </div>
    );
  }
}

Using the syntax and T function shared above, you can proceed by marking strings in all your existing code files; no extra file is needed.

Pushing content for translation

To push content for translation, you will need the txjs-cli tool installed on your system. You will also need the tokens created in your Transifex Project to be able to send content to your project. Using the CLI tool will scan all files in the selected folder and push the translatable content to your Transifex project using the command shown below.

$ npx txjs-cli push <SRC_FOLDER> --token=<PROJECT_TOKEN> --secret=<PROJECT_SECRET>

Using additional parameters, you can mark the content you push with custom tags, or make sure that you clean up any unused content. Read all the details in our CLI documentation.

Previewing translations

To preview translations in your application, you simply switch languages using your language picker. React components for Native SDK include a language picker that binds with the Native service to request translations, but you can build your own picker, too.

When a new language is selected, Native SDK will check if the latest translation versions are cached. If not, they will be fetched and made available in the application. As new translations are added to the Transifex project, they are made available in the application within an hour.

If you want to get the latest translations in your localhost or live environment, you can use an invalidate command from your command-line interface.

$ npx txjs-cli invalidate --token=<PROJECT_TOKEN> --secret=<PROJECT_SECRET>

Working with translations in Transifex

Entering the Transifex interface, all the content you have pushed from your code is added to the resources of your Transifex Native project. To access the phrases you pushed, visit the editor.

In the editor interface, you will see the full list of phrases and a set of tools that assist in content localization. You and your localization team can start working on the content by adding new translations or improving existing ones. Whenever a translation is saved, it is automatically made available in your Native application.

With Transifex Native, you can also fix a typo or improve the copywriting of your original text. Click the edit source string option and improve your content. Similar to translations, all edits are available in your Native application.

When will I see updated content in my application?

Transifex Native translations are served from a secure CDN server, called Transifex CDS, and are updated once every hour. Native CDS is an open-source server that you can install within your own infrastructure for additional modifications and security.

Optimize your workflow further

Transifex Native is flexible enough to support more complex workflows with an open architecture and toolset.

Working with branches

If you are working on multiple branches, you can mark the strings you push to Native by adding tags directly to the CLI command. This way, you can prioritize localization work in Transifex, as your localization team can filter by tags in the Editor. To push with tags, use the command shown below.

txjs-cli push <SRC_FOLDER> --token=<PROJECT_TOKEN> --secret=<PROJECT_SECRET> --append-tags=<YOUR_TAG>

Working with string keys, increase re-usability

If you want to improve your workflow in a development team and optimize the amount of content your localization team has to translate, use keys for your strings.

To use keys, you will need to add an extra attribute in the Native function that marks strings as translatable. Keys are unique identifiers that can be re-used in other areas of the code. Multiple strings with the same key are pushed as a single string in Transifex. So, the localization team will only need to add a single translation.

To use the key attribute, simply pass the _key parameter in the T component:

<Text><T _str="Hello world" _key=”welcome.string” /></Text>

Content splitting, like Namespaces in i18next

To serve smaller chunks of translation on specific pages, you can use the content splitting functionality. Breaking your content into smaller chunks is very useful in cases where your application has a lot of content but is not needed on every screen. For example, there is no reason to fetch over the air your help center content while the visitor is on your application settings page.

Content splitting works on top of tags, so you can either set a new tag or use any pre-existing ones to segment your content.

To use content splitting, set the appropriate tag in the tx.init function:

tx.init({
  token: 'project_token',
  filterTags: 'homepage',
});

You can combine content splitting with your branching tags, so you can test or debug localization in your localhost or staging environments:

tx.init({
  token: 'project_token',
  filterTags: 'new-login-page-branch',
});

Read the documentation on content splitting for a full overview.

Automating Application Releases

When your feature or branch is ready for deployment, you can do some housekeeping on your content using Native, too. Because content is always added to your Transifex Native resource, you might end up with many string artifacts while you are testing things on your branch.

You can clean up all the faulty content from the Native CLI tool using the purge attribute when pushing:

$ txjs-cli push <SRC_FOLDER> --token=<PROJECT_TOKEN> --secret=<PROJECT_SECRET> --purge

Purge will parse all code files found in the <SRC_FOLDER> and keep only the phrases detected in those files, deleting any phrases that are not detected in the code files.

By including the purge option in your deployment flow, you have housekeeping on auto-pilot.

Add more context for better translations

Your localization team working in Transifex will need more context for each phrase you are pushing. You can provide that context directly from your React components by using additional attributes of the T function:

• Context, to provide more details about a phrase
• Comments, where you can share instructions about the phrase
• Character limit, to share a specific requirement regarding the length of the translation
• Tags, for better string grouping.

An example of all this context is as follows:

<Text><T _str="Hello world" _context=”login screen, welcome screen” _comments=”String displayed as header and is followed by explanation paragraph” _charlimit=”30” /></Text>

All the additional information you attached to each phrase is available in the Context tab of the editor.

3 Reasons to Install Transifex Native

Now you know how to install TX Native, but do you know the “why”? Here are 3 reasons why you should install Native on your stack: 

• Less work for developers: Native minimizes developers’ involvement in the localization process by making localization a part of your code.

• No more files: A big part of the old-fashioned localization method is transferring files back and forth from the TMS to your platform. Such a simple task could surely be automated, right? That’s a big part of what Transifex Native is all about.
• Focus on localization: Forget about having to implement translation updates to your app. Native separates localization from development so that translators can focus on translating and engineers on programming.
  

Wanna show a quick Transifex Native React localization guide to one of your fellow developers? You can download the PDF here. 

Further reading: 

• From react-i18next to Transifex Native: Migration Guide
• React i18n: A Study with Data-backed Benefits of Transifex Native