react-i18n-gettext

React-i18n-gettext

Install

npm install react-i18n-gettext

i18n - Localization

• We use Jed and gettext to support localization for our page and components.
• For page, i18n will fetch locale data by async getInitialProps.
• For component, i18n will get locale data by context from I18nProvider inside.

locale builder

Scan files and generate PO files and push to Smartling, then pull the translations content. Fianlly convert PO to JSON.

node builder/build.js
# OR
make locale_build

i18n API:

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

For page:

import { localizePage, type I18nType } from 'react-i18n-gettext';

class Page extends React.Component {
    props: {
        i18n: I18nType,

        ...
    }

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

    ...
}

export default localizePage(Page);

For component:

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

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

        ...
    }

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

    ...
}

export default translate(Comp);

// _Comp is for jest test, we won't test translated component directly
export {
    Comp as _Comp,

    ...
};