i18n React framework using Transifex Native
npm install @transifex/react
Transifex Native is a full end-to-end, cloud-based localization stack for moderns apps.
React component for localizing React application using
Transifex Native.
Related packages:
- @transifex/native
- @transifex/cli
Learn more about Transifex Native in the Transifex Developer Hub.
Step1: Create a Transifex Native project in Transifex.
Step2: Grab credentials.
Step3: Internationalize the code using the SDK.
Step4: Push source phrases using the @transifex/cli tool.
Step5: Translate the app using over-the-air updates.
No translation files required.
If you are upgrading from the 1.x.x version, please read this migration guide, as there are breaking changes in place.
Install the library and its dependencies using:
``sh`
npm install @transifex/native @transifex/react --save
Component`javascript
import React from 'react';
import { T } from '@transifex/react';
function Example() {
return (
`
Available optional props:
| Prop | Type | Description |
|------------|--------|---------------------------------------------|
| _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:
`javascript`
button={}
bold={
This will render like this in English:
`html`
A and a bold walk into a bar
And like this in Greek:
`html`
Ένα και ένα βαρύ μπαίνουν σε ένα μπαρ
Assuming the translations look like this:
| source | translation |
|-----------------------------------------|--------------------------------------------------|
| A {button} and a {bold} walk into a bar | Ένα {button} και ένα {bold} μπαίνουν σε ένα μπαρ |
| button | κουμπί |
| bold | βαρύ |
The main thing to keep in mind is that the _str property to the T-component
must always be a valid ICU messageformat template.
Component`javascript
import React from 'react';
import { UT } from '@transifex/react';
function Example () {
return (
UT has the same behaviour as T, but renders source string as HTML inside a
div tag.Available optional props: All the options of
T plus:| Prop | Type | Description |
|---------|---------|-------------------------------------------------|
| _inline | Boolean | Wrap translation in
span |_Note: If you supply React elements as properties to the
UT component, it
will misbehave by rendering [object Object]. Only use React elements as
properties with the T component._useT hookMakes 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.`javascript
import React from 'react';import { useT } from '@transifex/react';
function Capitalized() {
const t = useT();
const message = t('Hello world');
return {message.toUpperCase()};
}
`Optionally
useT can take as param a custom Native Instance:`javascript
import { useT } from '@transifex/react';
import { createNativeInstance } from '@transifex/native';const customTX = createNativeInstance({
token: 'token',
secret: 'secret',
});
function Component() {
const t = useT(customTX);
// ...
}
`useLanguages hookReturns a state variable that will eventually hold the supported languages of
the application. Makes an asynchronous call to the CDS.
`jsx
import React from 'react';
import { useLanguages } from '@transifex/react';function LanguageList () {
const languages = useLanguages();
return (
{languages.map(({ code, name }) => (
{code}: {name}
))}
);
}
`Optionally
useLanguages can take as param a custom Native Instance:`javascript
import { useT } from '@transifex/react';
import { createNativeInstance } from '@transifex/native';const customTX = createNativeInstance({
token: 'token',
secret: 'secret',
});
function Component() {
const languages = useLanguages(customTX);
// ...
}
`useLocale hookReturns a state variable with the currently selected locale.
`jsx
import React from 'react';
import { useLocale } from '@transifex/react';function DisplayLocale () {
const locale = useLocale();
return (
Currently selected locale is {locale}
);
}
`Optionally
useLocale can take as param a custom Native Instance:`javascript
import { useT } from '@transifex/react';
import { createNativeInstance } from '@transifex/native';const customTX = createNativeInstance({
token: 'token',
secret: 'secret',
});
function Component() {
const locale = useLocale(customTX);
// ...
}
`useTX hookReturns a state variable with the Native instance.
`jsx
import React from 'react';
import { useTX } from '@transifex/react';function SetLocale () {
const tx = useTX();
return (
);
}
`LanguagePicker componentRenders a