Reputation: 648
We want to have our backoffice for the main site as a multilingual solution for our users. We have already decided to use React + Redux for it, as it makes a lot of sense to use the already deployed API for several functionalities such as authorization and data fetching ..
I used a custom approach in the past, but it's so complex and maybe we are missing a best practices
method here. The main site is already in 4 languages, and soon to grow into others.
I've taken a look at some of the ongoing libs, such as React-intl (https://github.com/yahoo/react-intl) and Airbnb Polyglot (http://airbnb.io/polyglot.js/)
What would be the best approach/lib/solution for building a multilingual site in React? (just on front-end, not an isomorphic app thou)
Upvotes: 12
Views: 18456
Reputation: 11
I'm working on a project that is developing based on the new Fluent API created by Mozilla. It's a very simple yet powerful way to I18n. Plus it has a JavaScript implementation as well as React Bindings (and other implementations as well), including very clear usage examples. It's platform agnostic and it can be used for backend or client-side.
Feel free to check:
Fluent homepage - https://projectfluent.org/
Fluent Playground (how Fluent works) - https://projectfluent.org/play/
GitHub repo - https://github.com/projectfluent
JavaScript implementation - https://github.com/projectfluent/fluent.js
React Bindings - https://github.com/projectfluent/fluent.js/tree/master/fluent-react
Upvotes: 1
Reputation: 132
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:
Provider
componentimport { 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>
);
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.
Upvotes: 5
Reputation: 3178
You can use redux-polyglot to easily use Airbnb's Polyglot in a React/Redux application. (Note: I'm one of the authors)
setLanguage(lang, messages)
getP(state)
selector that retrieves a P
object that exposes 4 methods :
t(key)
: original polyglot T functiontc(key)
: capitalized translationtu(key)
: upper-cased translationtm(morphism)(key)
: custom morphed translationgetLocale(state)
selector to get current languagetranslate
higher order component to enhance your React components by injecting the p
object in propsimport setLanguage from 'redux-polyglot/setLanguage';
store.dispatch(setLanguage('en', {
common: { hello_world: 'Hello world' } } }
}));
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 !
Upvotes: 11