How to add locale data dynamically using React Intl?

Question

Am using React-intl for internationalization of an UI Util Library. The library has a folder say i18n wherein I place json files for different locales.If the user of this library want to add support for additional locales, he/she can place additional json file with key/value pairs for the respective locale.

But React-intl requires to import and addLocaleData for the respective locale in prior.For example,

import fr from 'react-intl/locale-data/fr';
addLocaleData([...fr]);

Is there a way to addLocaleData and import the locale library for the respective locale dynamically in React-intl?

score 9 · Answer 1 · answered Dec 22 '16 at 16:03

9

If you are using webpack. You can code-split the different locale data from your app and load dynamically. Webpack 1 supports only require.ensure() and webpack 2 also supports System.import(). System.import returns a promise while require.ensure uses a callback. https://webpack.github.io/docs/code-splitting.html

With System.import()

import { addLocaleData } from 'react-intl';

const reactIntlLocaleData = {
  fr: () => System.import('react-intl/locale-data/fr'),
  en: () => System.import('react-intl/locale-data/en')
};

function loadLocaleData(locale){
  reactIntlLocaleData[locale]()
  .then((intlData) => {
    addLocaleData(intlData)
  }
}

With require.ensure()

import { addLocaleData } from 'react-intl';

const reactIntlLocaleData = {
  fr: () => require.ensure([], (require) => {
    const frData = require('react-intl/locale-data/fr');
    addLocaleData(frData);
  }),
  en: () => require.ensure([], (require) => {
    const enData = require('react-intl/locale-data/en');
    addLocaleData(enData);
  })
};

function loadLocaleData(locale){
  reactIntlLocaleData[locale]();
}

Depending on your development environment the code above may or may not work. It assumes you are using Webpack2 along with Babel to transpile your code.

answered Dec 22 '16 at 16:03

slchap5

460
3
7

Is it possible to load the json file the same way ? – Santhosh Dec 23 '16 at 04:43
Yes, you can use the same pattern as above to load the language json file. – slchap5 Jan 03 '17 at 22:29
@slchap5 Does this mean a single bundle will be created containing both `fr` & `en` locale data and loaded on the page via a script tag in your index.html ? Or will it just generate a bundle that can be loaded on runtime when `loadLocaleData` gets called ? – LoicUV Jan 06 '17 at 16:49
1

@LoicUV Each `require.ensure` or `system.import` will create a new split point and bundle that code into a separate file that will be loaded at runtime. So "Or will it just generate a bundle that can be loaded on runtime when loadLocaleData gets called" is correct. – slchap5 Jan 06 '17 at 17:30
2

@slchap5 Thx ! Also note that starting webpack v2.1.0-beta.28, `System.import()` is now replaced by `import()` – LoicUV Jan 23 '17 at 14:33

score -4 · Accepted Answer · edited May 09 '18 at 09:30

-4

Hey I have done this now, as described below and its working :-)

const possibleLocale = navigator.language.split('-')[0] || 'en';
addLocaleData(require(`react-intl/locale-data/${possibleLocale}`));

Here, the locale is fetched from the browser through navigator.language. Hope this helps :-)

edited May 09 '18 at 09:30

Jon Miles

9,605
11
46
66

answered Jan 09 '17 at 08:29

Santhosh

534
9
24

How to add locale data dynamically using React Intl?

2 Answers2

Linked