Skip to content

Instantly share code, notes, and snippets.

@dferber90
Created October 16, 2018 09:27
Show Gist options
  • Save dferber90/2869b856eee9e5f0df5adf1f1839b66f to your computer and use it in GitHub Desktop.
Save dferber90/2869b856eee9e5f0df5adf1f1839b66f to your computer and use it in GitHub Desktop.
Global locale knob react-intl's IntlProvider in Storybook
// .storybook/config.js
import IntlDecorator from './decorators/intl';
import { addDecorator } from '@storybook/react';
addDecorator(IntlDecorator);
// .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>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment