@helloworldqq/react-modal 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# React Hook Disclosure Modal
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@helloworldqq/react-modal)
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
5
|
|
|
6
6
|
Thư viện React hook mạnh mẽ và linh hoạt để quản lý modal với API khai báo rõ ràng. Hoàn hảo cho các ứng dụng cần quản lý nhiều modal với khả năng truyền dữ liệu.
|
|
@@ -36,11 +36,11 @@ Thư viện React hook mạnh mẽ và linh hoạt để quản lý modal với
|
|
|
36
36
|
## Cài Đặt
|
|
37
37
|
|
|
38
38
|
```bash
|
|
39
|
-
npm install @
|
|
39
|
+
npm install @helloworldqq/react-modal
|
|
40
40
|
# hoặc
|
|
41
|
-
yarn add @
|
|
41
|
+
yarn add @helloworldqq/react-modal
|
|
42
42
|
# hoặc
|
|
43
|
-
pnpm add @
|
|
43
|
+
pnpm add @helloworldqq/react-modal
|
|
44
44
|
```
|
|
45
45
|
|
|
46
46
|
---
|
|
@@ -49,7 +49,7 @@ pnpm add @vnquang24/react-modal
|
|
|
49
49
|
|
|
50
50
|
```tsx
|
|
51
51
|
import React from 'react'
|
|
52
|
-
import { ReactHookModalProvider, useDisclosure } from '@
|
|
52
|
+
import { ReactHookModalProvider, useDisclosure } from '@helloworldqq/react-modal'
|
|
53
53
|
import { Modal, Button } from 'antd'
|
|
54
54
|
|
|
55
55
|
// 1. Định nghĩa component modal của bạn
|
|
@@ -97,7 +97,7 @@ Component provider quản lý tất cả các modal đã đăng ký.
|
|
|
97
97
|
| `children` | `React.ReactNode` | ✅ | Các component con của ứng dụng |
|
|
98
98
|
|
|
99
99
|
---
|
|
100
|
-
|
|
100
|
+
|
|
101
101
|
### useDisclosure Hook
|
|
102
102
|
|
|
103
103
|
Hook chính để điều khiển trạng thái modal.
|
|
@@ -324,7 +324,7 @@ onOpen({ wrong: 'data' }) // ❌ Lỗi kiểu
|
|
|
324
324
|
|
|
325
325
|
```tsx
|
|
326
326
|
import { Modal, Button } from 'antd'
|
|
327
|
-
import { useDisclosure } from '@
|
|
327
|
+
import { useDisclosure } from '@helloworldqq/react-modal'
|
|
328
328
|
|
|
329
329
|
const BasicModal = () => {
|
|
330
330
|
const { isOpen, onClose } = useDisclosure({ tag: 'BasicModal' })
|
|
@@ -480,7 +480,7 @@ Ví dụ hoàn chỉnh với Ant Design 6:
|
|
|
480
480
|
```tsx
|
|
481
481
|
import React from 'react'
|
|
482
482
|
import { Modal, Button, Space, Form, Input, message } from 'antd'
|
|
483
|
-
import { ReactHookModalProvider, useDisclosure } from '@
|
|
483
|
+
import { ReactHookModalProvider, useDisclosure } from '@helloworldqq/react-modal'
|
|
484
484
|
|
|
485
485
|
// Các Component Modal
|
|
486
486
|
const WelcomeModal = () => {
|
package/package.json
CHANGED