Best approach to multilingual react webapp

You can use redux-polyglot to easily use Airbnb's Polyglot in a React/Redux application. (Note: I'm one of the authors)

It provides :

• a reducer to store language and corresponding messages. You can supply both by either :
  • a middleware that you can configure to catch specific action, deduct current language and get/fetch associated messages.
  • direct dispatch of setLanguage(lang, messages)
• a getP(state) selector that retrieves a P object that exposes 4 methods :
  • t(key): original polyglot T function
  • tc(key): capitalized translation
  • tu(key): upper-cased translation
  • tm(morphism)(key): custom morphed translation
• a getLocale(state)selector to get current language
• a translate higher order component to enhance your React components by injecting the p object in props

Simple usage example :

dispatch new language :

import setLanguage from 'redux-polyglot/setLanguage';

store.dispatch(setLanguage('en', {
    common: { hello_world: 'Hello world' } } }
}));

in component :

import React, { PropTypes } from 'react';
import translate from 'redux-polyglot/translate';

const MyComponent = props => (
  <div className='someId'>
    {props.p.t('common.hello_world')}
  </div>
);
MyComponent.propTypes = {
  p: PropTypes.shape({t: PropTypes.func.isRequired}).isRequired,
}
export default translate(MyComponent);

Please tell me if you have any question/suggestion !

React-Intl and Polyglot are two most popular I18n libraries, according to my experiences with both of the libraries I prefer the simple solution of Polyglot than React-Intl approach. Polyglot is simple but has full features with interpolation and pluralization and the scaling is tested by Airbnb.

There are many libraries created to make it easier to use Polyglot in a React application, polyglot-react is one of them (I'm the author). It's a very simple higher order component that pass the polyglot instance down to the child components as a prop.

The usage is simple with 2 steps:

1. Wrap the root component in the Provider component

import { Provider } from 'polyglot-react';
import App from './components/App';

const locale = "en";
const phrases = {
  "home.login": "Login",
  "home.signup": "Sign Up"
}

export default () => (
  <Provider locale={locale} phrases={phrases}>
    <App />
  </Provider>
);

2. Decorate the child component

import React, { Component } from 'react';
import { withPolyglot } from 'polyglot-react';

class TodoList extends Component {
  render() {
    const { polyglot } = this.props;
    return (
      <div>
        <h1>{ polyglot.t("list.title") }</h1>
        <ul>
          {this.state.todos.map( todo => <Todo {...todo} /> )}
        </ul>
      </div>  
    );
  }
}

TodoList = withPolyglot()(TodoList);
export default TodoList;

This solution works on both client and server sides Javascript application.