Nauseating Pumpkin Mush

    storybook-addon-intl

    2.4.1 • Public • Published

    Intl Addon Build Status

    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!' }
    };
     
    // Provide your formats (optional)
    const formats = {
        'en': {
                'date': {
                    'year-only': {
                        'year': '2-digit',
                    },
                },
            },
        'de': {
                'date': {
                    'year-only': {
                        'year': 'numeric',
                    },
                },
            },
    };
     
    const getMessages = (locale) => messages[locale];
    const getFormats = (locale) => formats[locale];
     
    // Set intl configuration
    setIntlConfig({
        locales: ['en', 'de'],
        defaultLocale: 'en',
        getMessages,
        getFormats,
    });
     
    // 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.

    Install

    npm i storybook-addon-intl

    DownloadsWeekly Downloads

    15,324

    Version

    2.4.1

    License

    MIT

    Unpacked Size

    99.4 kB

    Total Files

    37

    Last publish

    Collaborators

    • floriangosse