# @apideck/vault-react 中文文档

规范地址：https://npmcn.com/package/%40apideck/vault-react/

版本：1\.4\.2
npm 元数据更新时间：2026-09-17T09:13:38.443Z
中文译文更新时间：2026-11-06T10:00:12.456Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40apideck/vault-react
原文对照：https://npmcn.com/package/%40apideck/vault-react/?lang=original
项目主页：https://github.com/apideck-libraries/vault-react#readme
源码仓库：https://github.com/apideck-libraries/vault-react

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

- 包体积（解压后）：19 kB，16 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=12
- 运行依赖：1 个
- peer 依赖：react ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0，react-dom ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0
- 首次发布：2023-08-14T07:29:49.053Z
- 最新版本发布：2026-05-13T08:11:44.325Z
- 近 30 天下载量：54025（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 2 个）

## 中文简介

Apideck Vault 组件的反应钩.

## 安装

```sh
npm install @apideck/vault-react
```

也可以使用：`pnpm add @apideck/vault-react`、`yarn add @apideck/vault-react`、`bun add @apideck/vault-react`

## README

# 默认反应

容易嵌入的反应钩 [阿皮德克·沃尔](https://www.apideck.com/products/vault) 在任何反应应用程序中.

![](https://user-images.githubusercontent.com/8850410/208065819-716c6e02-98c9-4df5-b687-e5acd1e3c4e5.png)

**默认反应** | [断层](https://github.com/apideck-libraries/vue-vault) | [联署材料](https://github.com/apideck-libraries/vault-js)

## 安装

### 软件包

```sh
npm install @apideck/vault-react
```

## 先决条件

在打开虚拟模式之前 `@apideck/vault-react`,您需要使用 Vault API 或我们中的一个 [SDKs 软件](https://docs.apideck.com/sdks)中查找更多内容 [文档](https://docs.apideck.com/apis/vault/reference#operation/sessionsCreate)。 。 。 .

## 使用量

将您获得的JWT从Vault会话传到 `open` 函数以打开 Vault 模式.

```tsx
import { useVault } from '@apideck/vault-react';

function App() {
  const { open } = useVault();

  return (
    <button onClick={() => open({ token: 'REPLACE_WITH_SESSION_TOKEN' })}>
      Open Vault
    </button>
  );
}

export default App;
```

如果您只想要显示单个统一 API 的集成, 您可以通过 `unifiedApi` 道具 (英语). 如果您想要打开 Vault 只进行一个整合, 您可以提供 `serviceId` 道具 (英语).

```tsx
import { useVault } from '@apideck/vault-react';

function App() {
  const { open } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          unifiedApi: 'file-storage',
          serviceId: 'dropbox',
        })
      }
    >
      Open Vault
    </button>
  );
}

export default App;
```

如果你想在模式打开和关闭时得到通知,你可以提供 `onReady` 财务报告和审定财务报表 `onClose` 选项。 您也可以提供 `onConnectionChange` 财务报告和审定财务报表 `onConnectionDelete` 选项,以便在连接状态发生变化或被删除时得到通知.

```tsx
import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  function onClose() {
    console.log('close!');
  }

  function onReady() {
    console.log('ready!');
  }

  function onConnectionChange(connection: Connection) {
    console.log('changed!', connection);
    if (connection.state === 'callable') {
      close();
    }
  }

  function onConnectionDelete(connection: Connection) {
    console.log('ready!', connection);
  }

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          onReady,
          onClose,
          onConnectionChange,
          onConnectionDelete,
        })
      }
    >
      Open Vault
    </button>
  );
}

export default App;
```

如果你想打开一个特定的视图,你可以通过 `initialView` 道具 (英语). 现有观点是: `settings`, (中文(简体) ), `configurable-resources`,以及 `custom-mapping`。 。 。 .

```js
import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          unifiedApi: 'accounting',
          serviceId: 'quickbooks',
          initialView: 'custom-mapping',
        })
      }
    >
      Open Vault
    </button>
  );
}
```

如果您想用特定语言打开保险库, 您可以通过一个本地语言 。 现有地点是: `en` (违约), `nl`, (中文(简体) ), `de`, (中文(简体) ), `fr`,以及 `es`。 。 。 .

```js
import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          locale: 'nl',
        })
      }
    >
      Open Vault
    </button>
  );
}
```

如果您想要在底部显示语言切换, 您可以提供 `showLanguageSwitch` 道具 (英语).

```js
import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          locale: 'nl',
          showLanguageSwitch: true,
        })
      }
    >
      Open Vault
    </button>
  );
}
```

## 常见问题

### @apideck/vault-react 是什么？

Apideck Vault 组件的反应钩\.

### 如何安装 @apideck/vault-react？

在项目目录运行 npm install @apideck/vault-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）、react-dom（^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @apideck/vault-react 支持 TypeScript 吗？

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

### @apideck/vault-react 支持 ESM 还是 CommonJS？

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

### @apideck/vault-react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=12。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @apideck/vault-react 可以商用吗？

@apideck/vault-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @apideck/vault-react 的下载量有多少？

根据 npm 官方下载统计，@apideck/vault-react 在 2026/10/06 – 2026/11/04 这 30 天内被下载 54,025 次，日均约 1,801 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @apideck/vault-react 还在维护吗？

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