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>
))}
</>
);
}
}