# @canva/app-i18n-kit 中文文档

规范地址：https://npmcn.com/package/%40canva/app-i18n-kit/

版本：1\.3\.0
npm 元数据更新时间：2026-07-28T04:39:54.907Z
中文译文更新时间：2026-11-09T01:23:38.145Z
软件包许可：SEE LICENSE IN LICENSE\.md

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40canva/app-i18n-kit
原文对照：https://npmcn.com/package/%40canva/app-i18n-kit/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：30.1 kB，28 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@formatjs/intl \>=2\.10\.4 \<=3\.1\.8，intl-messageformat \>=10\.5\.14 \<=10\.7\.18，react 18 \|\| 19，react-dom 18 \|\| 19，react-intl \>=6\.6\.8 \<=7\.1\.14
- 首次发布：2024-09-10T00:59:17.836Z
- 最新版本发布：2026-07-28T04:39:54.764Z
- 近 30 天下载量：69862（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 2 个）

## 中文简介

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

## 安装

```sh
npm install @canva/app-i18n-kit
```

也可以使用：`pnpm add @canva/app-i18n-kit`、`yarn add @canva/app-i18n-kit`、`bun add @canva/app-i18n-kit`

## README

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

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

![](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) ![](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)

## 目录

-   [导言](https://npmcn.com/package/%40canva/app-i18n-kit/#readme-introduction)
-   [安装](https://npmcn.com/package/%40canva/app-i18n-kit/#readme-installation)
-   [使用量](https://npmcn.com/package/%40canva/app-i18n-kit/#readme-usage)
-   [捐款](https://npmcn.com/package/%40canva/app-i18n-kit/#readme-contributing)
-   [许可证](https://npmcn.com/package/%40canva/app-i18n-kit/#readme-license)

## 导言

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

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

### 反应组件内 - 示例使用

```tsx
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>
  );
}
```

### 外部反应组件 - 示例使用

```tsx
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 应用程序本地化的知识,请看 [正式文件](https://www.canva.dev/docs/apps/localization/)。 。 。 .

## 安装

### 用于反应应用程序

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

### 对于非反应应用程序

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

## 使用量

如果你正在使用这个 [Canva Apps SDK 启动套件](https://github.com/canva-sdks/canva-apps-sdk-starter-kit),则 `@canva/app-i18n-kit` 软件包已配置 .

迁移已有 Canva 应用程序或使用 `@canva/app-i18n-kit` 在不基于启动套件的应用程序中,请遵循其中的指令 [移动已存在的应用程序](https://www.canva.dev/docs/apps/localization/migrate-an-existing-app/) 在 Canva Apps SDK 文档中.

## 更改日志

见 `CHANGELOG.md` 文档.

## 捐款

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

## 许可证

见 `LICENSE.md` 文档.

## 常见问题

### @canva/app-i18n-kit 是什么？

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

### 如何安装 @canva/app-i18n-kit？

在项目目录运行 npm install @canva/app-i18n-kit，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@formatjs/intl（\>=2\.10\.4 \<=3\.1\.8）、intl-messageformat（\>=10\.5\.14 \<=10\.7\.18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @canva/app-i18n-kit 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @canva/app-i18n-kit 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @canva/app-i18n-kit 可以商用吗？

@canva/app-i18n-kit 使用 SEE LICENSE IN LICENSE\.md 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @canva/app-i18n-kit 的下载量有多少？

根据 npm 官方下载统计，@canva/app-i18n-kit 在 2026/10/09 – 2026/11/07 这 30 天内被下载 69,862 次，日均约 2,329 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @canva/app-i18n-kit 还在维护吗？

最新版本 1\.3\.0 发布于 2026/07/28（3 个月前）；至今共发布 14 个版本，其中过去 12 个月发布了 2 个；首次发布于 2024/09/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。