Global locale knob react-intl's IntlProvider in Storybook

config.js

// .storybook/config.js
import IntlDecorator from './decorators/intl';
import { addDecorator } from '@storybook/react';

addDecorator(IntlDecorator);

intl.js

// .storybook/decorators/intl.js

import React from 'react';
import { IntlProvider, addLocaleData } from 'react-intl';
import { withKnobs, select } from '@storybook/addon-knobs';
import en from 'react-intl/locale-data/en';
import de from 'react-intl/locale-data/de';
import es from 'react-intl/locale-data/es';

// "messages" should contain { en: {}, de: {}, .. }
import * as messages from '<path-to-your-message-files>';

addLocaleData(en);
addLocaleData(de);
addLocaleData(es);

const locales = Object.keys(messages);

export default storyFn => {
  const locale = select('global locale', locales, locales[0]);
  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      {storyFn()}
    </IntlProvider>
  );
};