translate.md

Translate

Provides translation API using context interfaces.

<Translations>

Translation provider, use it to broadcast your translation map. You can have multiple nested translations providers, where child provider will overwrite parent's translations. Also, you can have different translation providers at the same time, using the namespace ns prop.

Usage

import {Translations} from 'libreact/lib/translate';

<Translations map={{
  key: 'value',
  bye: 'ciao'
}}>
  <App />
</Translations>

Props

interface ITranslationsProps {
  map: {[key: string]: string | ((T, ...args) => string)};
  ns?: string;
}

, where

• map - required, object, a dictionary of translations.
• ns - optional, string, namespace.

<Translate> or <T>

Translation consumer render prop component that receives translation function T, which has the following signature

T: (key: string, ...args) => string;

<Translate> component has also a shorthand alias <T> component.

Usage

import {Translations, T} from 'libreact/lib/translate';

<Translations map={{
  key: 'value',
  bye: 'ciao'
}}>
  <T>{(t) =>
    <span>Goodbye is ${t('bye')}</span>
  }</T>
</Translations>

Props

interface ITranslateProps {
  ns?: string;
}

, where

• ns - optional, string, namespace.

withT() HOC

withT is an enhancer that injects T function into your component.

import {withT} from 'libreact/lib/translate';

const MyCompWithT = withT(MyComp);

@withT decorator

Component class decorator that injects T function into your component.

import {withT} from 'libreact/lib/translate';

@withT
class MyComp extends Component {

}