react-confirm-lite 1.0.5 → 1.0.7
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 +55 -38
- package/package.json +9 -2
package/README.md
CHANGED
|
@@ -1,23 +1,45 @@
|
|
|
1
1
|
# react-confirm-lite
|
|
2
2
|
|
|
3
|
-
A
|
|
4
|
-
Works like `window.confirm`, but modern, async, customizable, and framework-friendly.
|
|
3
|
+
**A lightweight, promise-based confirm dialog for React with built-in Tailwind CSS support**
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
✨ **Features:**
|
|
6
|
+
- Promise-based API like window.confirm
|
|
7
|
+
- Built-in Tailwind CSS styling
|
|
8
|
+
- Zero dependencies
|
|
9
|
+
- Fully customizable
|
|
10
|
+
- TypeScript support
|
|
11
|
+
- Queue system for multiple dialogs
|
|
10
12
|
|
|
11
13
|
---
|
|
12
14
|
|
|
15
|
+
## Quick Comparison
|
|
16
|
+
|
|
17
|
+
| Feature | react-confirm-lite | react-confirm | react-confirm-toast |
|
|
18
|
+
|---------|-------------------|---------------|---------------------|
|
|
19
|
+
| Built-in styling | ✅ Tailwind CSS | ❌ None | ✅ Toast style |
|
|
20
|
+
| Promise-based | ✅ | ✅ | ✅ |
|
|
21
|
+
| Zero dependencies | ✅ | ❌ | ❌ |
|
|
22
|
+
| Queue system | ✅ | ❌ | ❌ |
|
|
23
|
+
| Bundle size | < 3KB | ~5KB | ~10KB |
|
|
24
|
+
|
|
25
|
+
## Why Choose react-confirm-lite?
|
|
26
|
+
|
|
27
|
+
If you're using **Tailwind CSS** and want a **simple, lightweight** confirm dialog with **no configuration needed**, `react-confirm-lite` is perfect. You can also build custom confirm dialogs from scratch with ease.
|
|
28
|
+
|
|
13
29
|
|
|
14
30
|
|
|
15
|
-
##
|
|
16
|
-
|
|
31
|
+
## Getting Started
|
|
32
|
+
|
|
33
|
+
### Step 1: **Install the package**:
|
|
34
|
+
```bash
|
|
35
|
+
npm install react-confirm-lite
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Step 2: import
|
|
17
39
|
```ts
|
|
18
40
|
import { confirm, ConfirmContainer } from 'react-confirm-lite'
|
|
19
41
|
```
|
|
20
|
-
### Step
|
|
42
|
+
### Step 3: Use ConfirmContainer in your jsx or tsx file
|
|
21
43
|
```jsx
|
|
22
44
|
return (
|
|
23
45
|
<>
|
|
@@ -25,7 +47,7 @@ return (
|
|
|
25
47
|
</>
|
|
26
48
|
)
|
|
27
49
|
```
|
|
28
|
-
### Step
|
|
50
|
+
### Step 4: Use confirm function
|
|
29
51
|
```ts
|
|
30
52
|
const main = async () => {
|
|
31
53
|
const isConfirmed = await confirm('Are you sure');
|
|
@@ -43,6 +65,29 @@ or
|
|
|
43
65
|
}
|
|
44
66
|
}
|
|
45
67
|
```
|
|
68
|
+
## Complete Example
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
'use client' //If you are using nextjs then add this line
|
|
72
|
+
import { confirm, ConfirmContainer } from 'react-confirm-lite'
|
|
73
|
+
|
|
74
|
+
export default function Page() {
|
|
75
|
+
const handleDelete = async () => {
|
|
76
|
+
const isConfirmed = await confirm('Are you sure you want to delete?')
|
|
77
|
+
if (isConfirmed) {
|
|
78
|
+
// Perform deletion
|
|
79
|
+
console.log('Item deleted')
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return (
|
|
84
|
+
<div>
|
|
85
|
+
<button onClick={handleDelete}>Delete Item</button>
|
|
86
|
+
<ConfirmContainer />
|
|
87
|
+
</div>
|
|
88
|
+
)
|
|
89
|
+
}
|
|
90
|
+
```
|
|
46
91
|
## How to customize
|
|
47
92
|
You can customize it by giving classes like this
|
|
48
93
|
```jsx
|
|
@@ -104,30 +149,6 @@ yarn add react-confirm-lite
|
|
|
104
149
|
pnpm add react-confirm-lite
|
|
105
150
|
```
|
|
106
151
|
|
|
107
|
-
## Complete Example
|
|
108
|
-
|
|
109
|
-
```tsx
|
|
110
|
-
'use client'
|
|
111
|
-
import { confirm, ConfirmContainer } from 'react-confirm-lite'
|
|
112
|
-
|
|
113
|
-
export default function Page() {
|
|
114
|
-
const handleDelete = async () => {
|
|
115
|
-
const isConfirmed = await confirm('Are you sure you want to delete?')
|
|
116
|
-
if (isConfirmed) {
|
|
117
|
-
// Perform deletion
|
|
118
|
-
console.log('Item deleted')
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
return (
|
|
123
|
-
<div>
|
|
124
|
-
<button onClick={handleDelete}>Delete Item</button>
|
|
125
|
-
<ConfirmContainer />
|
|
126
|
-
</div>
|
|
127
|
-
)
|
|
128
|
-
}
|
|
129
|
-
```
|
|
130
|
-
|
|
131
152
|
## Props
|
|
132
153
|
|
|
133
154
|
### ConfirmContainer
|
|
@@ -201,10 +222,6 @@ The library includes a built-in queue system to handle multiple confirm requests
|
|
|
201
222
|
### Custom styling not working?
|
|
202
223
|
When using the `classes` prop, make sure your CSS classes have higher specificity or use `!important` if needed.
|
|
203
224
|
|
|
204
|
-
## License
|
|
205
|
-
|
|
206
|
-
MIT © Saad Nasir
|
|
207
|
-
|
|
208
225
|
## Author
|
|
209
226
|
|
|
210
227
|
**Saad Nasir**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-confirm-lite",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "A lightweight, promise-based confirm dialog for React with built-in Tailwind CSS support",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -36,7 +36,14 @@
|
|
|
36
36
|
"react-confirm",
|
|
37
37
|
"npm react-confirm",
|
|
38
38
|
"npm react-confirm-lite",
|
|
39
|
-
"react-confirm-lite"
|
|
39
|
+
"react-confirm-lite",
|
|
40
|
+
"tailwindcss",
|
|
41
|
+
"lightweight",
|
|
42
|
+
"zero-dependencies",
|
|
43
|
+
"simple",
|
|
44
|
+
"easy",
|
|
45
|
+
"ui",
|
|
46
|
+
"component"
|
|
40
47
|
],
|
|
41
48
|
"author": "Saad Nasir",
|
|
42
49
|
"license": "ISC",
|