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:

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

or with yarn:

1yarn add -D storybook-addon-i18next

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

1import 'storybook-addon-i18next/register';

Decorator

There's only one decorator for configuration.

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

1import { 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:

1{
2  en: 'English',
3  'zh-TW': '繁體中文',
4}

Examples

Basic Usage

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

1import 'storybook-addon-i18next/register';

Add i18next Configuration

Please refer to i18next-configuration-options.

Example in .storybook/config.js:

1import i18n from 'i18next';
2import { initReactI18next } from 'react-i18next';
3import Backend from 'i18next-xhr-backend';
4import LanguageDetector from 'i18next-browser-languagedetector';
5
6i18n
7  .use(Backend)
8  .use(LanguageDetector)
9  .use(initReactI18next)
10  .init({
11    whitelist: ['en', 'zh-TW'],
12    lng: 'en',
13    fallbackLng: 'en',
14    interpolation: {
15      escapeValue: false,
16    },
17  });
18
19addDecorator(
20  withI18next({
21    i18n,
22    languages: {
23      en: 'English',
24      'zh-TW': '繁體中文',
25    },
26  })
27);
28
29// Add <Suspense> after withI18next decorator
30addDecorator((story, context) => (
31  <Suspense fallback="Loading...">{story(context)}</Suspense>
32));