react-i18n-text

Tiny React Component binds language files with React Context.

Installation

yarn add react-i18n-text react

Usage

Single Intl

Add IntlProvider at the top of your app

Recommend to include your language file during the building process

import React from 'react'
import PropTypes from 'prop-types'
import { ConnectedRouter } from 'react-router-redux'
import { IntlProvider } from 'react-i18n-text'
import App from './app'

/**
 * locale value in String
 * e.g. "en-us"
 */
const LOCALE = process.env.BUILD_LOCALE
/**
 * locale messages in JSON or Object
 * e.g. {
 *   "test": "test",
 *   "roleInfo": "I am a {role}.",
 * }
 */
const MESSAGES = process.env.BUILD_LOCALE_MESSAGES

const propTypes = {
    history: PropTypes.object.isRequired
}

const Router = props => (
    <ConnectedRouter history={props.history}>
        <IntlProvider locale={LOCALE} messages={MESSAGES}>
            <App />
        </IntlProvider>
    </ConnectedRouter>
)

Router.propTypes = propTypes
export default Router

Inject IntlConsumer to component that need translations with injectIntl HOC

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { injectIntl } from 'react-i18n-text';

const propTypes = {
  intl: PropTypes.object.isRequired,
};

/**
 * this.props.intl = {
 *   locale: PropTypes.string.
 *   messages: PropTypes.objectOf(PropTypes.string),
 *   formatMessage: ({
 *     id: PropTypes.string,             // message key
 *     defaultMessage: PropTypes.string, // message defaultValue if message key is missing in locale files
 *   }, {
 *     [variableKey]: [variableValue],   // custom variables
 *     ...
 *   }) => PropTypes.string              // message value
 * }
 */
class View extends Component {
  render() {
    const roleMap = {
      'en-us': 'student',
      'zh-cn': '学生',
    };

    const { formatMessage, locale } = this.props.intl;

    return (
      <p>{formatMessage({ id: 'test' })}</p>
      <p>{formatMessage({ id: 'roleInfo' }, { role: roleMap[locale] })}</p>
    );
  }
}

View.propTypes = propTypes;
export default injectIntl(View);

Multi Intl

Add MultiIntlProvider at the top of your app

Recommend to include your language file during the building process

import React from 'react'
import PropTypes from 'prop-types'
import { ConnectedRouter } from 'react-router-redux'
import { MultiIntlProvider } from 'react-i18n-text'
import App from './app'

/**
 * default locale value in String
 * e.g. "en-us"
 */
const DEFAULT_LOCALE = process.env.BUILD_DEFAULT_LOCALE
/**
 * locale message map in JSON or Object
 * e.g. {
 *   "en-us": {
 *     "test": "test",
 *     "roleInfo": "I am a {role}.",
 *   },
 *   "zh-cn": {
 *     "test": "测试",
 *     "roleInfo": "我是一个{role}。",
 *   }
 * }
 */
const MESSAGE_MAP = process.env.BUILD_LOCALE_MESSAGE_MAP

const propTypes = {
    history: PropTypes.object.isRequired
}

const Router = props => (
    <ConnectedRouter history={props.history}>
        <MultiIntlProvider defaultLocale={DEFAULT_LOCALE} messageMap={MESSAGE_MAP}>
            <App />
        </MultiIntlProvider>
    </ConnectedRouter>
)

Router.propTypes = propTypes
export default Router

Inject IntlConsumer to component that need translations with injectIntl HOC

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { injectIntl } from 'react-i18n-text';

const propTypes = {
  intl: PropTypes.object.isRequired,
};

/**
 * this.props.intl = {
 *   locale: PropTypes.string.
 *   messages: PropTypes.objectOf(PropTypes.string),
 *   formatMessage: ({
 *     id: PropTypes.string,             // message key
 *     defaultMessage: PropTypes.string, // message defaultValue if message key is missing in locale files
 *   }, {
 *     [variableKey]: [variableValue],   // custom variables
 *     ...
 *   }) => PropTypes.string              // message value
 * }
 */
class View extends Component {
  render() {
    const roleMap = {
      'en-us': 'student',
      'zh-cn': '学生',
    };

    const { formatMessage, locale } = this.props.intl;

    return (
      <p>{formatMessage({ id: 'test' })}</p>
      <p>{formatMessage({ id: 'roleInfo' }, { role: roleMap[locale] })}</p>
    );
  }
}

View.propTypes = propTypes;
export default injectIntl(View);