Lingui react 擴充套件

linguijs react 擴充套件可用於提供本地化切換器和 linguijs react。

開始使用

首先，安裝擴充套件

npm install -D storybook-addon-linguijs

注意：需要以下對等相依性：@storybook/addons、@storybook/react、react 和 lingui/react。

將此行新增到您的 addons.js 檔案中（如果需要，請在您的 storybook 設定目錄中建立此檔案）。

import "storybook-addon-linguijs/register";

在您的 config.js 中，匯入 setLinguiConfig 和 withLingui 函式。使用 setLinguiConfig 設定 lingui/react 的組態，並使用 `withLingui` 作為裝飾器。

import { addDecorator, configure } from "@storybook/react";
import { setLinguiConfig, withLingui } from "storybook-addon-linguijs";

// Provide a catalog or import and use your existing one
const catalogs = {
  en: {
    messages: {
      "Hello Button": "Hello Button"
    }
  },
  fr: {
    messages: {
      "Hello Button": "Bonjour Button"
    }
  }
};

// Set configuration
setLinguiConfig({
  locales: ["en", "fr"],
  defaultLocale: "en",
  catalogs
});

// Register decorator
addDecorator(withLingui);

// Run storybook
configure(() => require("./stories"), module);

在您的 story 中，您需要用 <Trans> 或來自 @lingui/macro 的 t 函式包裝您的元件

import { Trans } from "@lingui/macro";

storiesOf("Button", Module).add("with text", () => (
  <Button>
    <Trans>Hello Button</Trans>
  </Button>
));