❤
npm
Sign UpSign In

webpack-config-intl

0.1.1 • Public • Published

webpack-config-intl

Add support for intl to your webpack build.

build status coverage license version downloads

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);

Readme

Keywords

none

Package Sidebar

Install

npm i webpack-config-intl

Repository

github.com/webpack-config/webpack-config-intl

Homepage

github.com/webpack-config/webpack-config-intl#readme

Weekly Downloads

0

Version

0.1.1

License

CC0-1.0

Last publish

Collaborators

  • nealgranger
Try on RunKit
Report malware