lifely-react-i18n

0.3.3 • Public • Published

lifely-react-i18n

npm version

A translator class and react component that rerenders text when the i18n instance updates.

Usage

$ yarn add lifely-react-i18n
import 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: 'user@example.com'})}</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: 'user@example.com}} />
                </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>

Readme

Keywords

none

Package Sidebar

Install

npm i lifely-react-i18n

Weekly Downloads

0

Version

0.3.3

License

MIT

Last publish

Collaborators

  • vandijkstef
  • bryantebeek
  • lifely-account