#webpack-config-intl

Add support for intl to your webpack build.

Usage

Install:

npm install --save webpack-config-intl

Add to your webpack.config.babel.js:

import intl from `webpack-config-intl`;

// Optional messagesDir config option specifying the location of yaml message
// files.
intl({messagesDir: 'intl/messages'})({
  /* existing webpack configuration */
})

Load intl data and messages dynamically in your app:

// intl.action.js
import {loadLocaleData, loadMessages} from 'webpack-config-intl/chunk-loader';

export const loadLocale = (locale) => (dispatch) =>
  Promise.all([loadMessages(locale), loadLocaleData(locale)])
    .then(([messages]) => dispatch({
      type: 'LOCALE_LOADED',
      payload: {locale, messages},
    }));

// intl.reducer.js
const initialState = {
  messages: {},
  locale: process.env.DEFAULT_LOCALE,
};

export default (state = initialState, action) => {
  switch (action.type) {
  case 'LOCALE_LOADED':
    return pick(['messages', 'locale'], action.payload);
  default:
    return state;
  }
};

Provide the loaded intl data to your components:

import {createElement} from 'react';
import setDisplayName from 'recompose/setDisplayName';
import {connect} from 'react-redux';
import {IntlProvider} from 'react-intl';

export const App = ({locale, messages, children, ...props}) =>
  <IntlProvider
    // By default, changes to the locale at runtime may not trigger a re-render
    // of child elements. Adding a `key` prop that changes with the locale
    // pursuades React to re-render the component tree.
    key={locale}
    locale={locale}
    messages={messages}
    defaultLocale={'en'}
    children={children}
    {...props}
  >
    // ...
  </IntlProvider>

const mapState = (state) => ({
  locale: state.intl.locale,
  messages: state.intl.messages,
)};

export default connect(mapState, null)(App);