storybook-addon-intl

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/addons, @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);

Troubleshooting

Accessing nonexistent addons channel error:

This error can be caused by multiple conflicting versions of @storybook/addons in your app.

• Ensure that the entries starting with @storybook/addon- in your package.json refer to the same and latest version.
• Add the latest version of @storybook/addons to your app's dependencies and reinstall all modules.

If the above steps don't solve the issue, please read the storybook documentation on this topic:

Most of the time, the fix is deleting the node_modules folder with any package-lock.json or yarn.lock and reinstalling.