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，你从上面的文件导出了 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;

故事参数语言环境

如果你想让一个故事使用特定的语言环境，请在该故事的参数中设置它。

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

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

请注意，这样做会将当前语言环境切换到参数语言环境，因此当你切换到没有参数的故事时，它将保留在最后选择的语言环境。

在上面的示例中，如果你查看日语故事，然后点击返回默认故事，语言环境将保留为 ja。

---

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

点击此地球仪图标将显示一个下拉菜单，其中包含你在 parameters 中定义的语言环境。

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