Adding Internationalization addon in storybook

Addon addition in storybook

Prerequisites:

The article centers on adding Intl- addon to the storybook. To accomplish this task, you’ll be needing the following versions.

• react-Intl(2.4.0)
• storybook(3.2.8)

Just Follow these Simple Steps to add Intl-addon in storybook

1. Open addon.js file inside .storybook folder and add this import : “import ‘storybook-addon-intl/register’ “
2. After the first step internationalization add-on gets registered in the storybook.
3. Now open config.js file inside .storybook folder and add following import statement.

import { setIntlConfig, withIntl } from 'storybook-addon-intl';
import { addLocaleData } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import urLocaleData from 'react-intl/locale-data/ur';

4. Add the following line for adding language in locale in config.js

addLocaleData(enLocaleData);
addLocaleData(urLocaleData);

5.Now we need to define messages object using our translation files:

const messages = {
‘en’: “”,
‘ur’: “”
}

6. Now write a single line function to get translations from messages object:

const getMessages = (locale) => messages[locale];

7. Now call setIntlConfig method imported earlier:

locales: List of locales that your application/system is supporting.

defaultLocale: Define default locale for your application/system.

getMessages: function to return translation files based on passing locale.

setIntlConfig({
     locales: ['en', 'ur'],       
     defaultLocale: 'en',
       getMessages
      });

8. Now, to add decorator of Intl, add following line:

addDecorator(withIntl);

9.Congratulations, your addon is configured in the storybook. You are now ready to use Internationalization in your App