react-quick-intl

A quick way to internationalize your React app. Inspired by react-intl's injectIntl().

Installation

npm install react-quick-intl

Usage

react-quick-intl provides a higher-order component, intlWrap(), and a regular React component, <IntlString>. intlWrap() controls the language of the app via context and takes two arguments: 1) the root component of your application and 2) a localeData object whose structure can be seen in the example below. <IntlString> takes one prop, message, whose value should correspond to one in the localeData object.

import React from 'react';
import { intlWrap, IntlString } from 'react-quick-intl';

const localeData = {
  "en": {
    "react": "React"
  },
  "zh": {
    "react": "反應"
  }
}

class App extends React.Component {
  onLangChange(lang) {
    this.props.onLangChange(lang);
  }
  render() {
    return (
      <div>
        <button onClick={this.onLangChange.bind(this, 'en')}>
          English
        </button>
        <button onClick={this.onLangChange.bind(this, 'zh')}>
          中文
        </button>
        <IntlString message="react" />
      </div>
    )
  }
}

// Pass in your app's root component and localeData object into intlWrap()
// react-quick-intl uses context to pass down the app's language to all
// <IntlString> components
export default intlWrap(App, localeData);