Storybook react-i18next 插件

轻松集成 react-i18next 到 Storybook。

所需的 Peer Dependencies

• Version 4.x - storybook - ^9.0.0

• Version 3.x - storybook - ^8.0.0

• i18next - ^22.0.0 || ^23.0.0 || ^24.0.0 || ^25.0.0

• i18next-browser-languagedetector - ^7.0.0 || ^8.0.0

• i18next-http-backend: ^2.0.0 || ^3.0.0

• react-i18next - ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0

此 Storybook 插件假定您的项目已设置并配置好 i18next 和 react-i18next，并安装了所有必需的包且正常工作。

安装

将此插件安装为 devDependency。

npm i -D storybook-react-i18next

如果您的项目尚未安装 i18next 和 react-i18next，则需要将其安装为依赖项。

npm i -S i18next react-i18next i18next-browser-languagedetector i18next-http-backend

用法

安装后，按照以下 3 个步骤在 Storybook 中启用此插件。

main.ts

将此插件插入到您的 addons 数组中

{
  addons: [
    // other addons...
    'storybook-react-i18next',
  ]
}

---

i18next.ts

在您的 .storybook 文件夹中创建一个名为 i18next.ts 的文件（或您喜欢的任何名称）。

在此文件中，复制并粘贴以下代码，并根据需要进行修改（资源文件路径、语言等）。

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

const ns = ['common'];
const supportedLngs = ['en', 'fr', 'ja'];
const resources = ns.reduce((acc, n) => {
    supportedLngs.forEach((lng) => {
    if (!acc[lng]) acc[lng] = {};
        acc[lng] = {
            ...acc[lng],
            [n]: require(`../public/locales/${lng}/${n}.json`),
        };
    });
    return acc;
}, {});

i18n.use(initReactI18next)
    .use(LanguageDetector)
    .use(Backend)
    .init({
        //debug: true,
        lng: 'en',
        fallbackLng: 'en',
        defaultNS: 'common',
        ns,
        interpolation: {escapeValue: false},
        react: {useSuspense: false},
        supportedLngs,
        resources,
    });

export default i18n;

有关配置选项的详细信息，请参阅 i18next 配置选项 文档。

---

preview.ts

在您的 preview.ts 中，您需要将 locales 和 locale 添加到 initialGlobals 中（如果您使用的是旧版 storybook，则添加到 globals 中），并将您从上述文件导出的 i18n 添加到 parameters 中。

locales 是一个对象，其中键是区域设置/语言的“ID”，值是您希望在下拉菜单中显示的名称。

locale 是您希望的默认区域设置。

import i18n from './i18next';

const preview: Preview = {
    initialGlobals: {
        locale: 'en',
        locales: {
            en: 'English',
            fr: 'Français',
            ja: '日本語',
        },
    },
    parameters: {
        i18n,
    },
};

export default preview;

您也可以使用完整的区域设置字符串作为键。这取决于您的 i18next 配置。

import i18n from './i18next';

const preview: Preview = {
    initialGlobals: {
        locale: 'en_US',
        locales: {
            en_US: 'English (US)',
            en_GB: 'English (GB)',
            fr_FR: 'Français',
            ja_JP: '日本語',
        },
    },
    parameters: {
        i18n,
    },
};

export default preview;

locales 对象的值也可以是一个对象，包含 title、left 或 right 键。

如果您想在左侧或右侧包含表情符号标志或其他字符串，这将很有用。

例如

import i18n from './i18next';

const preview: Preview = {
    initialGlobals: {
        locale: "en",
        locales: {
            en: {icon: '🇺🇸', title: 'English', right: 'EN'},
            fr: {icon: '🇫🇷', title: 'Français', right: 'FR'},
            ja: {icon: '🇯🇵', title: '日本語', right: 'JP'},
        },
    },
    parameters: {
        i18n,
    },
};

export default preview;

或者像这样

import i18n from './i18next';

const preview: Preview = {
    initialGlobals: {
        locale: 'en_US',
        locales: {
            en_US: {title: 'English', right: 'US'},
            en_GB: {title: 'English', right: 'GB'},
            fr_FR: {title: 'Français', right: 'FR'},
            ja_JP: {title: '日本語', right: 'JP'},
        },
    },
    parameters: {
        i18n,
    },
};

export default preview;

故事参数区域设置

如果您希望某个故事使用特定的区域设置，请在其故事参数中进行设置。

export const Default: StoryObj = {
    render: () => <YourComponent/>,
};

export const Japanese: StoryObj = {
    parameters: {
        locale: 'ja',
    },
    render: () => <YourComponent/>,
};

请注意，这样做会将当前区域设置切换到参数指定的区域设置，因此当您切换到没有参数的故事时，区域设置将保留在上次选择的区域设置。

在上面的示例中，如果您查看日语故事，然后单击返回默认故事，则区域设置将保持为 ja。

---

完成这些步骤并启动 Storybook 后，您应该会在工具栏中看到一个地球图标。

单击此地球图标将显示一个下拉菜单，其中包含您在 parameters 中定义的区域设置。

切换区域设置将使用您的区域设置 json 文件中定义的字符串。