react-i18n-jed

react-i18n-jed

React i18n for Gettext based on Jed

Installation

# With npm
npm i --save react-i18n-jed jed

# Or with yarn
yarn add react-i18n-jed jed

i18n API:

All the txt, pluralTxt and context should be literal string.

gettext(txt)
pgettext(context, txt)
ngettext(txt, pluralTxt, count)
npgettext(context, txt, pluralTxt, count)

I18nProvider

We should get the Jed instance to . Then we can get it from Component.props in the whole components tree cooperated with translate().

import { I18nProvider } from 'react-i18n-jed';
import Jed from 'jed';

const i18n = new Jed(localeJSON);

<I18nProvider i18n={this.i18n}>
    <WrappedComponent i18n={this.i18n} {...this.props} />
</I18nProvider>

The localeJSON should match the standard Gettext data format, like

{
    domain: 'messages',
    language: 'en-US',
    locale_data: {
        messages: {
            '': {
                domain: 'messages',
            },
            'Ad Expense': ['Test Ad Expense'],
            'App or Publisher': ['App or Publisher'],
            Cat: ['Cat', 'Cats'],
        },
    },
}

Localize a component:

import { translate, type I18nType } from 'react-i18n-jed';

class Comp extends React.Component {
    props: {
        i18n: I18nType,
    };

    render() {
        const { gettext } = this.props.i18n;
        return <div>{gettext('hello')}</div>;
    }
}

export default translate(Comp);

In test files, you won't be able to use shallow rendering with the translated component. Instead, you'll want to access the wrapped component directly like so:

import mockI18n from 'react-i18n-jed/mockI18n';
import TranslatedComponent from '.';

const Comp = TranslatedComponent.WrappedComponent;
const tree = shallow(<Comp i18n={mockI18n} />);

License

MIT © App Annie