Storybook Addon Intl

The Intl addon can be used to provide locale switcher and react-intl.

Getting Started

First, install the addon

npm install -D storybook-addon-intl

Then, add following content to .storybook/main.js:

export default {
    addons: ['storybook-addon-intl']
};

In .storybook/preview.js, add the following:

// Provide your messages
const messages = {
    en: { message: 'Just some text.' },
    de: { message: 'Nur etwas Text.' },
    es: { message: 'Sólo un texto.' }
};

const getMessages = (locale) => messages[locale];

export default {
    parameters: {
        intl: {
            locales: defaultLocales,
            defaultLocale: 'en',
            getMessages
        }
    }
};

Configuration

Parameter key: intl

locales

Type: string[]

Available locales.

defaultLocale

Type: string

Fallback locale.

getMessages

Type: (locale: string) => object

Getter function that takes the active locale as arguments and expects an object of messages as a return value.

(See messages in IntlProvider docs of react-intl)

getFormats

Type: (locale: string) => object

Getter function that takes the active locale as arguments and expects an object of formats as a return value.

(See formats in IntlProvider docs of react-intl)

defaultRichTextElements

Type: object

Object of rich text elements.

(See defaultRichTextElements in IntlProvider docs of react-intl)