Storybook Addon Intl

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


Getting Started

First, install the addon

``shell
npm install -D storybook-addon-intl
`

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

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

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

`js
// 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

$3

Type: string[]

Available locales.

$3

Type: string

Fallback locale.

$3

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)

$3

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)

$3

Type: object

Object of rich text elements.

(See defaultRichTextElements in IntlProvider` docs of react-intl)