Best approach to multilingual react webapp
Solution 1
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 aP
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 thep
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 !
Solution 2
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:
- 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>
);
- 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.
Related videos on Youtube
elQueFaltaba
Updated on September 14, 2022Comments
-
elQueFaltaba over 1 year
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)
-
hazardous almost 8 yearsMy response is opinionated, I have had some success with using npmjs.com/package/i18n with my React app. Its syntax is not as verbose as React Intl. It had the most critical features I needed, like client side on-demand resources loading, ls caching and string fallbacks. YMMV.
-
zamarrowski about 7 yearsHi! Maybe do this is a little spam but your question motivated me to write this library: github.com/zamarrowski/translate-components
-
elQueFaltaba about 7 yearsNice input, @zamarrowski .. We are leveraging the use of translation strings to do some internationalization (plurals, dates, currency) so it's imperative for us to be able to use variables in our strings, and different output depending on them. Managing them within javascript, we can output them uppercase, lowercase, etc as we need .. Also, we currently support 5 languages, with up to 250+ different UI text translations, so having just one .json object doesn't seem like a good match .. (this has grown and extended very fast lately)
-
zamarrowski@elQueFaltaba thanks! I will work on this in translate-components :)
-
-
elQueFaltaba over 6 yearsThank you for the input, @Ho Duc Ha .. I finally came up with something very much in the same way as yours, a higher order component, that would expose the string identifiers, and the translation function, but was also matched to language changes from a particular Redux action (yes, probably too coupled to our app), to listen to the changing language event to load the appropriated language files. We used the excellent l10ns library for everything related to internationalization as well, but as the app grew, we were having way too many string ids, so we should have splitted into chunks
-
Ho Duc Ha over 6 yearsThanks @elQueFaltaba for sharing your solution. Since I want to support server side rendering for SEO purpose, I would detect the language from the URL or accept-language request header then load the appropriate language files. It make sense to split the language file into chunks in a large application.
-
Atul Gupta over 4 yearsAny success with javascript implementation?