https://github.com/galkinrost/react-intlable
High order component for declarative Internationalization
https://github.com/galkinrost/react-intlable
intl react
Last synced: about 2 months ago
JSON representation
High order component for declarative Internationalization
- Host: GitHub
- URL: https://github.com/galkinrost/react-intlable
- Owner: galkinrost
- License: mit
- Created: 2016-02-20T16:33:37.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-05-11T06:31:14.000Z (about 9 years ago)
- Last Synced: 2025-03-28T20:37:10.768Z (2 months ago)
- Topics: intl, react
- Language: JavaScript
- Size: 16.6 KB
- Stars: 23
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React intlable [](https://travis-ci.org/babotech/react-intlable)
[intl-messageformat](https://github.com/yahoo/intl-messageformat) bindings for React
## Installation
```
npm install --save intl-messageformat react-intlable
```
## Implementation
```javascript
import React from 'react'
import { IntlableProvider } from 'react-intlable'
import Application from './Application'
const { messages, locale } = window.__LOCALE_DATA__
const ApplicationContainer = () => (
)
```
## Decorator
```javascript
import React from 'react'
import { intlable } from 'react-intlable'
const Application = ({formatMessage, formatDate, formatNumber}) => (
{formatMessage(`application.greeting`, { name: `World`})}
{formatDate(new Date())}
{formatNumber(100, { style: `currency`, currency: `USD`, currencyDisplay: `symbol` })
)
export default intlable(Application)
```
## Messages
Simple object
```javascript
{
application: {
greeting: `Hello {name}!`
}
}
```
## Browser support
[Can i use](http://caniuse.com/#feat=internationalization)
If you want fully cross browser support, these steps for you:
### Install inlt polyfill
```
npm install --save intl
```
### Use ready loader
```javascript
import AppContainer from './AppContainer'
import React from 'react'
import ReactDOM from 'react-dom'
import {ready} from 'react-intlable'
import pathToLocale from 'intl/locale-data/json/en.json'
ready(pathToLocale, () => {
ReactDOM.render(, document.getElementById(`app`))
})
```
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
```javascript
{
test: /\.json$/,
loader: `file?name=[hash].[ext]`
}
```
### Universal rendering
[Example](https://github.com/babotech/one-more-react-universal-example)
For consistent results of internationalization you should use polyfill both on server and client
On server
```javascript
global.Intl = require(`intl`)
require(`intl/locale-data/jsonp/en.js`)
require(`intl/locale-data/jsonp/eu.js`)
...
```
And force loading required data on client
```javascript
ready(pathToLocale, () => {
ReactDOM.render(, document.getElementById(`app`))
}, true)
```