Adding Internationalization addon in storybook


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.

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

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

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

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.

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

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