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>
));