Transifex

Transifex

  • Documentation
  • Javascript SDK
  • Localize React applications

Localize React applications

Outdated article

All developer documentation has moved to Transifex Developer Hub. Read this article here.

You can easily localize React components using the @transifex/react library extension.

Checkout a quick overview video.

Installation

Install the extension library using:

npm install @transifex/react --save

Usage

Use the T component to mark strings for translation based on the example below.

import React, { Component } from 'react';

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

class Example extends Component {
  render() {
    const user = 'Joe';
    return (
      <div>
        <T _str="Hello world" />
        <T _str="Hello {username}" username={user} />
      </div>
    );
  }
}

Available optional props are:

  • _str [String] Source string
  • _context [String] String context, affects key generation
  • _key [String] Custom string key
  • _comment [String] Developer comment
  • _charlimit [Number] Character limit instruction for translators
  • _tags [String] Comma separated list of tags

The T-component can accept React elements as properties and they will be rendered properly, ie this would be possible: 

<T
  _str="A {button} and a {bold} walk into a bar"
  button={<button><T _str="button" /></button>}
  bold={<b><T _str="bold" /></b>} />

This will render like this in English and Greek, assuming we have appropriate translations:

A <button>button</button> and a <b>bold</b> walk into a bar

Ένα <button>κουμπί</button> και ένα <b>βαρύ</b> μπαίνουν σε ένα μπαρ

Use the UT component to mark raw HTML strings for translation based on the example below.

import React, { Component } from 'react';

import { UT } from '@transifex/react';

class Example extends Component {
  render() {
    const user = 'Joe';
    return (
      <div>
        <UT _str="Hello <b>{username}</b>" username={user} />
        <p>
          <T _str="Hello <b>{username}</b>" _inline username={user} />
        </p>
      </div>
    );
  }
}

Available optional props are:

  • _inline [Boolean] The _str string will be encapsulated in a <div> tag by default. Setting _inline prop will encapsulate translation in a <span> tag, so that in can be used inline, e.g. within a <p> tag.
  • All the options of the T component.

useT hook

Makes the current component re-render when a language change is detected and returns a t-function you can use to translate strings programmatically.

You will most likely prefer to use the T or UT components over this, unless for some reason you want to have the translation output in a variable for manipulation.

import React from 'react';

import { useT } from '@transifex/react';

function Capitalized() {
  const t = useT();
  const message = t('Hello world');
  return <span>{message.toUpperCase()}</span>;
}

useLanguages hook

Returns a state variable that will eventually hold the supported languages of the application. Makes an asynchronous call to the CDS.

import React from 'react';
import { useLanguages } from '@transifex/react';

function LanguageList () {
  const languages = useLanguages();
  return (
    <ul>
      {languages.map(({ code, name }) => (
        <li key={code}>
          <strong>{code}</strong>: {name}
        </li>
      ))}
    </ul>
  );
}

useLocale hook

Returns a state variable with the currently selected locale.

import React from 'react';
import { useLocale } from '@transifex/react';

function DisplayLocale () {
  const locale = useLocale();
  return (
    <p>Currently selected locale is {locale}</p>
  );
}

LanguagePicker component

Renders a <select> tag that displays supported languages and switches the application's selected language on change. Uses useLanguages and useLocale internally. 

import React from 'react';
import { T, LanguagePicker } from '@transifex/react';

function App () {
  return (
    <div>
      <T _str="This is a translatable message" />
      <LanguagePicker />
    </div>
  );
}

Accepts properties:

  • className: The CSS class that will be applied to the <select> tag

If you want something different than a <select>, it should be easy to write your own language picker using useLanguages and useLocale: 

import React from 'react';
import { tx } from '@transifex/native';
import { useLanguages, useLocale } from '@transifex/react';

function MyLanguagePicker () {
  const languages = useLanguages();
  const locale = useLocale();

  return (
    <>
      {languages.map(({ code, name }) => (
        <button key={code} onClick={() => tx.setCurrentLocale(code)}>
          {name} {locale === code ? '(selected)' : ''}
        </button>
      ))}
    </>
  );
}
}

CONTINUE READING