现代 React 模态库
一个轻量级、基于 Promise 的 React 模态组件，使模态处理变得简单、直观且类型安全。
功能
React Snappy Modal 设计用于通过强大的基于 Promise 的 API 使模态管理变得简单直观。
基于 Promise 的 API
在模态中使用 async/await 以干净、顺序的方式处理用户交互，避免回调地狱。
轻量级
零依赖和极小的包大小，保持应用程序快速高效。
可定制
通过简单的配置选项轻松定制模态的外观和行为。
类型安全
使用 TypeScript 构建，提供出色的类型检查和智能感知支持。
受控流程
通过等待用户输入后再继续下一步来控制应用程序流程。
React 18+ 兼容
专为最新版本的 React 构建，包括并发渲染。
示例
通过这些常见的模态模式查看 React Snappy Modal 的实际运行
提示模态框
简单的提示模态框可用于向用户显示信息。模态框返回一个 Promise，在用户关闭时解决。
tsx
1function AlertModal() {
2 return (
3 <ModalWrapper>
4 <ModalTitle>Alert</ModalTitle>
5 <ModalText>
6 This is a simple alert modal that displays information to the user.
7 </ModalText>
8 <ModalButtons>
9 <ModalButton primary onClick={() => SnappyModal.close()}>
10 Confirm
11 </ModalButton>
12 </ModalButtons>
13 </ModalWrapper>
14 );
15}
16
17const showAlert = async () => {
18 await SnappyModal.show(<AlertModal />)
19 alert("alert closed")
20};
21确认模态框
确认模态框让用户做出决定。模态框返回传递给 SnappyModal.close() 的值，使处理用户选择变得容易。
tsx
1function ConfirmModal() {
2 return (
3 <ModalWrapper>
4 <ModalTitle>Confirm Action</ModalTitle>
5 <ModalText>Are you sure you want to proceed?</ModalText>
6 <ModalButtons>
7 <ModalButton onClick={() => SnappyModal.close(false)}>
8 Cancel
9 </ModalButton>
10 <ModalButton primary onClick={() => SnappyModal.close(true)}>
11 Confirm
12 </ModalButton>
13 </ModalButtons>
14 </ModalWrapper>
15 );
16}
17
18const showConfirm = async () => {
19 const result = await SnappyModal.show(<ConfirmModal />);
20 alert("User confirmed:" + result);
21
22 if (result) {
23 // User confirmed
24 } else {
25 // User cancelled
26 }
27};
28表单模态框
轻松创建模态表单以收集用户输入。表单数据可以作为模态框的结果传递，使处理变得简单。
tsx
1function FormModal() {
2 const [name, setName] = useState("");
3
4 return (
5 <ModalWrapper>
6 <ModalTitle>Enter Your Name</ModalTitle>
7 <FormGroup>
8 <Label>Full Name</Label>
9 <Input
10 value={name}
11 onChange={e => setName(e.target.value)}
12 placeholder="Enter your full name"
13 />
14 </FormGroup>
15 <ModalButtons>
16 <ModalButton onClick={() => SnappyModal.close(null)}>
17 Cancel
18 </ModalButton>
19 <ModalButton primary onClick={() => SnappyModal.close(name)}>
20 Submit
21 </ModalButton>
22 </ModalButtons>
23 </ModalWrapper>
24 );
25}
26
27const showForm = async () => {
28 const result = await SnappyModal.show(<FormModal />);
29
30 if (result) {
31 alert("Submitted name:" + result);
32 }
33};
34安装
通过几个简单步骤开始使用 React Snappy Modal
bash
1npm install react-snappy-modal1
安装包
使用您首选的包管理器安装 react-snappy-modal 包，如上所示。
2
导入模态组件
在您的应用程序中导入 SnappyModal 组件。
tsx
1import SnappyModal from 'react-snappy-modal';3
添加 SnappyModalProvider
用 SnappyModalProvider 包装您的应用程序，以确保模态可以在应用程序中的任何地方显示。
tsx
1import { SnappyModalProvider } from 'react-snappy-modal';
2
3function App() {
4 return (
5 <SnappyModalProvider>
6 {/* Your app components */}
7 </SnappyModalProvider>
8 );
9}4
开始使用模态
您已准备就绪！现在，您可以在应用程序的任何地方使用 SnappyModal.show() 来显示模态。
用法
了解如何在应用程序中有效使用 React Snappy Modal
基本用法
React Snappy Modal 提供了一个简单的、基于 Promise 的 API 来显示模态。这是一个基本示例：
tsx
1import React from 'react';
2import SnappyModal, { useCurrentModal } from 'react-snappy-modal';
3
4function MyModal() {
5 const { resolveModal } = useCurrentModal();
6
7 return (
8 <div className="my-modal">
9 <h2>My Modal</h2>
10 <p>This is a basic modal example.</p>
11 <button onClick={() => resolveModal('modal result')}>
12 Close Modal
13 </button>
14 </div>
15 );
16}
17
18function MyComponent() {
19 const showModal = async () => {
20 const result = await SnappyModal.show(<MyModal />);
21
22 console.log('Modal result:', result);
23 };
24
25 return (
26 <button onClick={showModal}>Open Modal</button>
27 );
28}配置模态选项
您可以使用各种选项自定义模态的行为和外观：
tsx
1import SnappyModal, { useCurrentModal } from 'react-snappy-modal';
2
3function CustomModal() {
4 const { resolveModal } = useCurrentModal();
5
6 return (
7 <div className="my-modal">
8 <h2>Custom Modal</h2>
9 <p>This modal has custom options.</p>
10 <button onClick={() => resolveModal('result')}>
11 Close
12 </button>
13 </div>
14 );
15}
16
17// Show a modal with custom options
18const showCustomModal = async () => {
19 const result = await SnappyModal.show(
20 <CustomModal />,
21 {
22 // Modal configuration options
23 allowOutsideClick: false, // Prevent closing when clicking backdrop
24 allowScroll: true, // Allow page scrolling behind modal
25 backdrop: true, // Dim the page behind the modal
26 position: 'top-center', // Position modal at top
27 zIndex: 1050 // Custom z-index
28 }
29 );
30
31 console.log('Modal closed with:', result);
32};