@cmckenna/ use-async- module (英语)
在 React.js 时使用钩子显示已承诺的模式 .
关于
这基本上和重播一样 哈拉什/使用-同步-模式 但现在你可以在打开时把道具传给模式! : 太阳镜:
目录
见 变动情况 用于发行笔记. 2.0.0 需要反应 18+
(c) 使用“反应16.8-17” 1.0.x。 。 。 .
所需资源
- 反应 18 或更新 (单位:千美元)
react财务报告和审定财务报表react-dom是同级依赖关系). - 18号或更新的 以消耗已发布的软件包。 构建输出为 ES2020并使用Node APIs.
纽约 打开 这个Repo需要一个新的节点 而不是消耗它 捐款. ) (中文(简体) )
一揽子措施包括无害环境管理和共同JS exports 地图,所以
import 财务报告和审定财务报表 require 双向右输入的解析器
配置 .
使用回放16.8–17吗?. 坚持住
1.0.x。 。 。 .
安装
npm i @cmckenna/use-async-modal
yarn add @cmckenna/use-async-modal
使用量
首先,我们需要一种组件模式来显示:
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 软件包中尽可能高.
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>
</>
);
};
样式
带有小默认样式表的覆盖船. 输入一次,在任何地方 您的应用程序 :
import "@cmckenna/use-async-modal/index.css";
你可以完全跳过它和风格 .useModal__overlay 自己,或者把它覆盖
按模式与 overlayStyles 编号 : overlayClassName 选项.
作为钩子参数,我们通过一个有属性的物体 Component 这就是我们模式的组成部分. showModal 是将承诺与我们的价值相去甚远的函数 onResolve 内 Dialog 组件.
再来 实例 使用时间.
演示文稿
捐款
欢迎拉动请求。 对于重大变动,请先开出一个问题来讨论你想要改变什么.
开发此 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。 。 。 .
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
请确保酌情更新测试.