lifely-react-i18n
v0.3.3
Published
Lifely implementation of i18n in react projects
Keywords
Readme
lifely-react-i18n
A translator class and react component that rerenders text when the i18n instance updates.
Usage
$ yarn add lifely-react-i18nimport i18next from 'i18next';
import { initialize } from 'lifely-react-i18n';
initialize(i18next);initialize(i18nextInstance, {options})
To use the translator class you need to initialize it in your project root by providing your i18next instance, you only need to do this once.
options: defaultComponent
If you don't provide createTranslatorComponent with a component option it will wrap your text in a <span> by default, but you can alter this default behaviour to any text rendering component or element by providing the defaultComponent option.
Translator class
The translator class provides a translate method (t) that renders translated values that are assigned to keys in the provided namespace. You can subscribe your component to the translator that will automatically update the translated text when the current language changes. If you don't want the headache associated with subscribing and unsubscribing you can use the createTranslatorComponent method (recommended).
import { Translator } from 'lifely-react-i18n';
export default class LoginView extends Component {
constructor(props) {
super(props);
this.translator = new Translator({
namespace: 'App.LoginView',
subscribe: this,
});
}
componentWillUnmount() {
// don't forget to unsubscribe!
this.translator.unsubscribe(this);
}
render() {
const { t } = this.translator;
return (
<View>
<Paragraph>{t('foo.bar', {email: '[email protected]'})}</Paragraph>
</View>
);
}
}Translator.subscribe(instance)
you can pass the component instance to the constructor like this
this.translator = new Translator({
namespace: 'App.LoginView',
subscribe: this,
});or you can subscribe at a later time like this
this.translator.subscribe(this);Translator.unsubscribe(instance)
to unsubscribe (like on componentWillunmount) you have to pass the same instance you provided when subscribing
this.translator.unsubscribe(this);createTranslatorComponent
createTranslatorComponent returns a React component that has a built-in subscription to the current language and namespace. This way you won't have to manage your translation subscriptions yourself.
import { createTranslatorComponent } from 'lifely-react-i18n';
const T = createTranslatorComponent({
namespace: 'loggedin.tabs.AnnouncementsScene',
component: MyTextRenderingComponent,
});
export default class AnnouncementsScene extends Component {
render() {
return (
<View>
<Header>
<Title>
<T i18n={'header.title'} />
</Title>
</Header>
<Body>
<T i18n={'body.currentUser'} options={{email: '[email protected]}} />
</Body>
</View>
);
}
}T.transformText
If you would like some more control over the outputted text you can transform the text output with the transformText hook.
{
"foo": {
"bar": "Hello"
}
}<Wrapper>
<T i18n={'foo.bar'} transformText={(text) => `${text} World!`} />
</Wrapper>In the browser will output to:
<div class="wrapper">
<span>Hello World!</span>
</div>