Storybook react-i18next 插件

轻松集成 react-i18next 到 Storybook。

所需对等依赖项

• storybook - ^8.2.0
• i18next - ^22.0.0 || ^23.0.0
• i18next-browser-languagedetector - ^7.0.0 || ^8.0.0
• i18next-http-backend: ^2.0.0
• react-i18next - ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0

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

安装

将此插件作为开发依赖项安装。

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 添加到参数中。

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;

Story 参数语言环境

如果希望某个 Story 使用特定的语言环境，请在该 Story 的参数中设置它。

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

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

请注意，执行此操作会将当前语言环境切换到参数语言环境，因此当您切换到没有参数的 Story 时，它将保留在上次选择的语言环境中。

在上面的示例中，如果您查看日语 Story，然后单击返回“默认”Story，则语言环境将保持为 ja。

---

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

单击此地球图标将显示一个包含您在 parameters 中定义的语言环境的下拉列表。

切换语言环境将使用您在语言环境 json 文件中定义的字符串。