Polygot | HOC | React

internationalStore.js

import React, { Children } from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import Polyglot from 'node-polyglot'

import messages from './message'

const locale = window.localStorage.getItem('locale') || 'fr'
const polyglot = new Polyglot({
  locale,
  phrases: messages[locale]
})
const translate = polyglot.t.bind(polyglot)

class ThemeProvider extends React.Component {
  getChildContext() {
    return {
      theme: this.props.theme,
      translate: this.props.translate
    }
  }
  render() {
    return Children.only(this.props.children)
  }
}

ThemeProvider.propTypes = {
  theme: PropTypes.object.isRequired,
  translate: PropTypes.func.isRequired
}

ThemeProvider.childContextTypes = {
  theme: PropTypes.object.isRequired,
  translate: PropTypes.func.isRequired
}

const themed = (ComponentToWrap) => {
  class ThemeComponent extends React.Component {
    render() {
      const { theme, translate } = this.context
      return (
        <ComponentToWrap {...this.props} theme={theme} translate={translate} />
      )
    }
  }
  ThemeComponent.contextTypes = {
    theme: PropTypes.object.isRequired,
    translate: PropTypes.func.isRequired
  }
  return ThemeComponent
}

const StatelessComponent = ({ text, theme, translate }) => (
    <div style={{ color: theme.color }}>
      {translate('home')}
    </div>
  )

const HelloWorld = themed(StatelessComponent)

const theme = {
  color: '#cc3300',
  fontFamily: 'Georgia'
}

ReactDOM.render(
    <ThemeProvider theme={theme} translate={translate}>
      <HelloWorld text={'HELLO WORLD'} />
    </ThemeProvider>,
  document.getElementById('main')
)