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?

slchap5 · Accepted Answer · 2016-12-22 16:03:43Z

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, 2016 at 16:03

slchap5

4603 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Santhosh Over a year ago

Is it possible to load the json file the same way ?

slchap5 Over a year ago

Yes, you can use the same pattern as above to load the language json file.

LoicUV Over a year ago

@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 ?

slchap5 Over a year ago

@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.

LoicUV Over a year ago

@slchap5 Thx ! Also note that starting webpack v2.1.0-beta.28, System.import() is now replaced by import()

Jon Miles · Accepted Answer · 2018-05-09 09:30:31Z

-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 9, 2018 at 9:30

Jon Miles

9,96312 gold badges49 silver badges68 bronze badges

answered Jan 9, 2017 at 8:29

Santhosh

53411 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to add locale data dynamically using React Intl?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related