React intlable
intl-messageformat bindings for React
Installation
npm install --save intl-messageformat react-intlable
Implementation
const messages locale = window__LOCALE_DATA__ const ApplicationContainer = <IntlableProvider messages=messages locale=locale> <Application /> </IntlableProvider>
Decorator
const Application = <div> <h1></h1> <p></p> <p></p> </div>) Application
Messages
Simple object
application: greeting: `Hello {name}!`
Browser support
If you want fully cross browser support, these steps for you:
Install inlt polyfill
npm install --save intl
Use ready loader
pathToLocale is a public url for localization data required by intl polyfill
If you use webpack, you can use file-loader to get this url
test: /\.json$/ loader: `file?name=[hash].[ext]`
Universal rendering
For consistent results of internationalization you should use polyfill both on server and client
On server
globalIntl = ...
And force loading required data on client