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)