# @cmckenna/use-async-modal 中文文档

规范地址：https://npmcn.com/package/%40cmckenna/use-async-modal/

版本：2\.0\.0
npm 元数据更新时间：2026-08-14T18:39:08.879Z
中文译文更新时间：2026-11-10T04:01:37.567Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cmckenna/use-async-modal
原文对照：https://npmcn.com/package/%40cmckenna/use-async-modal/?lang=original
项目主页：https://github.com/cmcken22/use-async-modal#readme
源码仓库：https://github.com/cmcken22/use-async-modal

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

- 包体积（解压后）：68.6 kB，10 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：0 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2023-10-26T05:21:02.309Z
- 最新版本发布：2026-08-14T18:39:08.589Z
- 近 30 天下载量：3563（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 1 个）

## 中文简介

在 React.js 时使用钩子显示已承诺的模式 .

## 安装

```sh
npm install @cmckenna/use-async-modal
```

也可以使用：`pnpm add @cmckenna/use-async-modal`、`yarn add @cmckenna/use-async-modal`、`bun add @cmckenna/use-async-modal`

## README

# @cmckenna/ use-async- module (英语)

在 React.js 时使用钩子显示已承诺的模式 .

![npm](https://img.shields.io/npm/v/@cmckenna/use-async-modal?style=flat-square) ![NPM](https://img.shields.io/npm/l/@cmckenna/use-async-modal?style=flat-square) [![Test](https://github.com/cmcken22/use-async-modal/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/cmcken22/use-async-modal/actions/workflows/test.yml) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@cmckenna/use-async-modal?style=flat-square) ![npm peer dependency version](https://img.shields.io/npm/dependency-version/@cmckenna/use-async-modal/peer/react?style=flat-square)

# 关于

## 这基本上和重播一样 [哈拉什/使用-同步-模式](https://github.com/Harasz/use-async-modal/blob/main/README.md) 但现在你可以在打开时把道具传给模式! : 太阳镜:

# 目录

1.  [所需资源](https://npmcn.com/package/%40cmckenna/use-async-modal/#readme-requirements)
2.  [安装](https://npmcn.com/package/%40cmckenna/use-async-modal/#readme-installation)
3.  [使用量](https://npmcn.com/package/%40cmckenna/use-async-modal/#readme-usage)
4.  [演示文稿](https://npmcn.com/package/%40cmckenna/use-async-modal/#readme-demos)
5.  [捐款](https://npmcn.com/package/%40cmckenna/use-async-modal/#readme-contributing)
6.  [许可证](https://npmcn.com/package/%40cmckenna/use-async-modal/#readme-license)

见 [变动情况](https://npmcn.com/package/%40cmckenna/use-async-modal/CHANGELOG.md) 用于发行笔记. **`2.0.0` 需要反应 18+ (c) 使用“反应16.8-17” `1.0.x`。 。 。 .**

## 所需资源

-   **反应 18 或更新** (单位:千美元)`react` 财务报告和审定财务报表 `react-dom` 是同级依赖关系).
-   **18号或更新的** 以消耗已发布的软件包。 构建输出为 ES2020并使用Node APIs.

纽约 _打开_ 这个Repo需要一个新的节点 而不是消耗它 [捐款](https://npmcn.com/package/%40cmckenna/use-async-modal/#readme-contributing). ) (中文(简体) )

一揽子措施包括无害环境管理和共同JS `exports` 地图,所以 `import` 财务报告和审定财务报表 `require` 双向右输入的解析器 配置 .

> 使用回放16.8–17吗?. 坚持住 `1.0.x`。 。 。 .

## 安装

您可以使用 [无](https://www.npmjs.com/package/@cmckenna/use-async-modal) 或者说 [线条](https://yarnpkg.com/)数字 :

```bash
npm i @cmckenna/use-async-modal

yarn add @cmckenna/use-async-modal
```

## 使用量

首先,我们需要一种组件模式来显示:

```JSX
export const Dialog = ({ onResolve, title, acceptBtnText, cancelBtnText }) => {
  return (
    <div>
      <button onClick={() => onResolve({ accepted: true })}>{acceptBtnText ?? 'Accept'}</button>
      <button onClick={() => onResolve({ accepted: false })}>{cancelBtnText ?? 'Cancel'}</button>
    </div>
  );
};
```

在组件中,我们要打开一个模式,我们需要使用 `useModal` 钩从 `@cmckenna/use-async-modal` 软件包。 只需增加一次 `ModalContainer` 构成部分从 `@cmckenna/use-async-modal` 软件包中尽可能高.

```JSX
import { useModal, ModalContainer } from "@cmckenna/use-async-modal";
import { Dialog } from "./Dialog";

export const App = () => {
    const showModal = useModal({
    Component: Dialog,

    /*
        Type: Function
        Desc: It will be invoked when the window is closed.
        Options:
          - resolved: value passed to onResolve.
    */
    onClose: ({ resolved }) => {},

    /*
        Type: Function
        Desc: It will be invoked when the window is opened.
        Options:
          - containerId: string containing attribute id for overlay in DOM,
          - containerRef: HTMLDivElement ref to overlay.
    */
    onOpen: ({ containerId, containerRef }) => {},

    /*
        Type: Object
        Desc: Inline styles applied to overlay.
    */
    overlayStyles: {
      backgroundColor: "red",
      margin: "1px"
    },

    /*
        Type: String
        Desc: Classes to be applied to overlay.
        Accept multiple classes names separated
        by space ex. "px-1 mx-2 bg-green".
    */
    overlayClassName: "px-1",

    /*
        Type: Bool
        Desc: If set to true, dialog will close
        after escape key down.
        Default value: false
    */
    closeOnEsc: true,

    /*
        Type: Bool
        Desc: If set to true, the dialog will
        close when the overlay was clicked.
        Default value: false
    */
    closeOnOverlayClick: true,

    /*
        Type: same as onResolve
        Desc: The value passed to the onResolve
        function when the dialog was closed with
        the Escape key or an overlay click.
    */
    defaultResolved: { accepted: false },

    /*
        Type: String
        Desc: Classes to be applied to overlay
        after closing. Accept multiple classes
        names separated by space.
    */
    overlayClassNameOnClose: "fade-out",

    /*
        Type: same as onResolve
        Desc: Classes to be applied to overlay
        when open. Accept multiple classes names
        separated by space.
    */
    overlayClassNameOnOpen: "fade-in",

    /*
        Type: Number (unit: ms)
        Desc: Delayed closing time expressed
        in milliseconds.
    */
    closeTimeoutMs: 1000,

    /*
        Type: Bool (default: true)
        Desc: Locking the scrollbar on the page
        when the model is open.
    */
    blockBodyScroll: true,
  });

  async function handleClick() {
    const status = await showModal({
      title: 'Hello World',
      acceptBtnText: 'Ok',
      cancelBtnText: 'Deny'
    });
    // { accepted: true } or { accepted: false }
  }

  /*
        necessary to add <ModalContainer /> once at the top of app
  */
  return (
    <>
      <ModalContainer />
      <button onClick={handleClick}>Open dialog</button>
    </>
  );
};

```

### 样式

带有小默认样式表的覆盖船. 输入一次,在任何地方 您的应用程序 :

```js
import "@cmckenna/use-async-modal/index.css";
```

你可以完全跳过它和风格 `.useModal__overlay` 自己,或者把它覆盖 按模式与 `overlayStyles` 编号 : `overlayClassName` 选项.

作为钩子参数,我们通过一个有属性的物体 `Component` 这就是我们模式的组成部分. `showModal` 是将承诺与我们的价值相去甚远的函数 `onResolve` 内 `Dialog` 组件.

再来 [实例](https://github.com/cmcken22/use-async-modal/tree/main/examples) 使用时间.

## 演示文稿

[确认对话框](https://codesandbox.io/s/use-async-modal-confirm-dialog-lbb7l)

[信息对话框](https://codesandbox.io/s/use-async-modal-information-dialog-nsrpe)

[有输入的对话框](https://codesandbox.io/s/use-async-modal-dialog-with-input-jxobn)

[动画对话框](https://codesandbox.io/s/use-async-modal-animated-dialog-808yp)

## 捐款

欢迎拉动请求。 对于重大变动,请先开出一个问题来讨论你想要改变什么.

开发此 Repo 需要一个新的节点, 而不是消耗已发布的软件包 已经 Dev工具链的组合 `engines` 限制是:

```
^22.22.2 || ^24.15.0 || >=26.0.0
```

请注意,这是 **没有** 连续的"22.22.2和上"范围——节点23, 节点24.0–24.14,节点25均被排除在外. jsdom 30 是约束 约束; Vite 8 (`^20.19.0 || >=22.12.0`)为更松.

`.nvmrc` 针入已知的好版本,所以 `nvm use` 在此目录中显示您 a 支助员额。 CI 通过 `node-version-file`。 。 。 .

```bash
npm ci
npm run typecheck     # tsc --noEmit
npm run lint          # eslint
npm test              # vitest
npm run build         # tsup -> dist/
npm run check:exports # publint + arethetypeswrong
```

请确保酌情更新测试.

## 许可证

[麻省理工学院](https://github.com/cmcken22/use-async-modal/blob/main/LICENSE)

## 常见问题

### @cmckenna/use-async-modal 是什么？

在 React\.js 时使用钩子显示已承诺的模式 \.

### 如何安装 @cmckenna/use-async-modal？

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

### @cmckenna/use-async-modal 支持 TypeScript 吗？

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

### @cmckenna/use-async-modal 支持 ESM 还是 CommonJS？

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

### @cmckenna/use-async-modal 需要什么版本的 Node\.js？

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

### @cmckenna/use-async-modal 可以商用吗？

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

### @cmckenna/use-async-modal 的下载量有多少？

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

### @cmckenna/use-async-modal 还在维护吗？

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