lung-storybook-addon-intl
v2.1.4
Published
Addon to provide locale switcher and react-intl for storybook
Downloads
9
Maintainers
Readme
Intl Addon
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
Note: Following peer dependencies are required: @storybook/react
, react
and react-intl
.
Add this line to your addons.js
file (create this file inside your storybook config directory if needed).
import 'storybook-addon-intl/register';
In your config.js
import the setIntlConfig
and withIntl
function. Use setIntlConfig
to set the configuration
for react-intl
and `withIntl´ as decorator.
import { addDecorator, configure } from '@storybook/react';
import { setIntlConfig, withIntl } from 'storybook-addon-intl';
// Load the locale data for all your defined locales
import { addLocaleData } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import deLocaleData from 'react-intl/locale-data/de';
addLocaleData(enLocaleData);
addLocaleData(deLocaleData);
// Provide your messages
const messages = {
'en': { 'button.label': 'Click me!' },
'de': { 'button.label': 'Klick mich!' }
};
const getMessages = (locale) => messages[locale];
// Set intl configuration
setIntlConfig({
locales: ['en', 'de'],
defaultLocale: 'en',
getMessages
});
// Register decorator
addDecorator(withIntl);
// Run storybook
configure(() => require('./stories'), module);