@canva/app-i18n-kit (英语)

Canva应用的国际化工具包. 适应 react-intl 财务报告和审定财务报表 @formatjs/intl 与 Canva Apps SDK 本地化进程合作

目录

• 导言
• 安装
• 使用量
• 捐款
• 许可证

导言

这个 @canva/app-i18n-kit 软件包提供Canva应用程序本地化所需的公用事业。 它支持:

• 在反应组件内 - 使用这个 AppI18nProvider 构成部分, FormattedMessage 构成部分和 useIntl 钩子
• 外部反应组件 - 使用这个 initIntl 函数

反应组件内 - 示例使用

import { AppI18nProvider } from "@canva/app-i18n-kit";
import { FormattedMessage, useIntl } from "react-intl";

// Wrap your app at the root
function App() {
  return (
    <AppI18nProvider>
      <MyComponent />
    </AppI18nProvider>
  );
}

// Use hooks or components within the provider
function MyComponent() {
  const intl = useIntl();
  const placeholder = intl.formatMessage({
    defaultMessage: "Search...",
    description:
      "Placeholder text shown in the search input field before the user types",
  });

  return (
    <Box>
      <FormattedMessage
        defaultMessage="Welcome to my app"
        description="Heading displayed at the top of the app when it first loads"
      />
      <TextInput placeholder={placeholder} />
    </Box>
  );
}

外部反应组件 - 示例使用

import { initIntl } from "@canva/app-i18n-kit";

const intl = initIntl();
async function getPublishConfiguration() {
  return {
    status: "completed",
    outputTypes: [
      {
        id: "post",
        displayName: intl.formatMessage({
          defaultMessage: "Feed Post",
          description:
            "Label shown in the output type dropdown for publishing to social media feeds",
        }),
        // ...
      },
    ],
  };
}

要了解更多关于 Canva 应用程序本地化的知识,请看 正式文件。 。 。 .

安装

用于反应应用程序

npm install @canva/app-i18n-kit react-intl && npm install --save-dev @formatjs/cli

对于非反应应用程序

npm install @canva/app-i18n-kit @formatjs/intl && npm install --save-dev @formatjs/cli

使用量

如果你正在使用这个 Canva Apps SDK 启动套件,则 @canva/app-i18n-kit 软件包已配置 .

迁移已有 Canva 应用程序或使用 @canva/app-i18n-kit 在不基于启动套件的应用程序中,请遵循其中的指令 移动已存在的应用程序 在 Canva Apps SDK 文档中.

更改日志

见 CHANGELOG.md 文档.

捐款

我们正在积极开发这个一揽子计划,但目前不接受第三方的捐款. 如果您想要求修改或添加软件包,请通过 Canva 开发者社区。 。 。 .

许可证

见 LICENSE.md 文档.