storybook-addon-i18next

Storybook Addon i18next

Storybook Addon i18next allows your stories to be displayed in different language with i18next.

NOTE: It only support React for now.

Installation

Install the following npm module:

npm i --save-dev storybook-addon-i18next

or with yarn:

yarn add -D storybook-addon-i18next

Then, add following content to .storybook/addons.js

import 'storybook-addon-i18next/register';

Decorator

There's only one decorator for configuration.

Import and use the withI18next decorator in your config.js file.

import { withI18next } from 'storybook-addon-i18next';

i18n : Object

---

An configuration object for i18next.

languages : Object

---

A key-value pair of language codes and display name

Example:

{
  en: 'English',
  'zh-TW': '繁體中文',
}

Examples

Basic Usage

Simply import the Storybook i18next Addon in the addons.js file in your .storybook directory.

import 'storybook-addon-i18next/register';

Add i18next Configuration

Please refer to i18next-configuration-options.

Example in .storybook/config.js:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    whitelist: ['en', 'zh-TW'],
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

addDecorator(
  withI18next({
    i18n,
    languages: {
      en: 'English',
      'zh-TW': '繁體中文',
    },
  })
);

// Add <Suspense> after withI18next decorator
addDecorator((story, context) => (
  <Suspense fallback="Loading...">{story(context)}</Suspense>
));