react-intl-loader

Async react-intl locale data loader for webpack.

Motivation

Instead of needing a long utility function with a require.ensure for every locale, you can write something like this:

// ES6 syntax
 
const locales = {
  en: () => require('react-intl?locale=en!./en.json'),
  de: () => require('react-intl?locale=de!./de.json')
}
 
function loadLocaleData (locale) {
  return new Promise((resolve) => {
    locales[locale]()(resolve)
  })
}
 
loadLocaleData(someLocale).then((messages) => {
  // do something with messages
})

Installation

$ npm install --save intl intl-locales-supported react-intl
$ npm install --save-dev react-intl-loader

Usage

Documentation: Using loaders

To asynchronously load your locale data from ./en.json with the locale en, use:

require('react-intl?locale=en!./en.json')(function (messages) {
  // messages contains the require of ./en.json
});

This will asynchronously require (via webpack's require.ensure) the following modules:

'intl/locale-data/jsonp/en' // Optional: only if Intl does not support this locale
'react-intl/locale-data/en'
'./en.json'

You can use any file and file type for your locale data as long as you have the appropriate webpack loader installed and configured.