Localization in actions.js sentences and example

Question

We decide on where to go for localization in response.js, of course, there are ways to do localization, but what will be your recommendation?

I tried yahoo response-intl but to no avail:

var ReactIntl = require('react-intl') // we did npm install react-intl // somewhere in the react component render: function() { return (<div><ReactIntl.Number>{600}</ReactIntl.Number></div>); } 

gives an error: it is impossible to read the property "_mockedReactClassConstructor" from undefined

spent several hours to solve this error, still can not solve → refuse

I tried l20n from mozilla but not sure if it will work with react.js

I wonder what would you suggest for localizing react.js, thanks!

Answer 1

It's been a couple of months. Perhaps there are more localization modules. But if you want to do something simple and workaround using so many modules (we use only important modules, reduce the load), here is the setting:

let's say we have a page with a root page and a login page (in our router setup, everything works on the root page)

root

• has state i18n (in getInitialState)
• define your language and run i18n
• set object to i18n state
• In render () use something like this

 render: function() { var route; if (this.state.configLoaded && this.state.i18n) { route = ( <RouteHandler i18n={this.state.i18n} onLanguageChange={this._languageChangedHandler} /> ); } return ( <div> <Loading /> {route} </div> ); } 

and you pass i18n down through the details. or if you want using mixins.

To come in

 this.props.i18n.t('...') 

Answer 2

in response to my question. we decided not to use yahoo response-intl, but instead use i18next. Considering using something more stable and popular for our production is important.

what you can do is initialize the i18next at the root of your page and pass this through the details. Use state to prevent page rendering before i18next is initialized.

Answer 3

now there is a reaction-i18next https://github.com/i18next/react-i18next works with i18next> = 2.0.0

Answer 4

I think maybe using FormattedNumber from React-Intl for your purpose.
What to consider if you are using i18next, which only gives you translations, not Times / Dates / Currency, etc., you will need additional libraries such as Moment.js. React-Intl gives you everything. Beware of IE <9, you should have Intl.js polyfill or polyfill service ( https://cdn.polyfill.io/v2/docs/ ). I found that webpack was problematic loading this polyfill.

Finally, with the latest version of React-Router, see https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md

You will probably find a section on RouteHandler, use {React.cloneElement (this.props.children, {someExtraProp: something})} to pass your cramps / messages to views.

Hope that helps