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 新增至 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;

Story 參數語言環境

如果您想要讓 story 使用特定的語言環境，請在該 Story 的 parameters 中設定。

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

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

請注意，這樣做會將目前的語言環境切換為參數語言環境，因此當您變更為沒有參數的 story 時，它將停留在最後選取的語言環境。

在上面的範例中，如果您檢視日語 story，然後按一下返回 Default story，語言環境將保持為 ja。

---

完成這些步驟並啟動 storybook 後，您應該會在工具列中看到一個地球圖示。

按一下此地球圖示會顯示一個下拉式選單，其中包含您在 parameters 中定義的語言環境。

切換語言環境將使用您語言環境 json 檔案中定義的字串。