react-confirm-lite 1.0.5 → 1.0.6
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 +32 -14
- 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');
|
|
@@ -201,10 +223,6 @@ The library includes a built-in queue system to handle multiple confirm requests
|
|
|
201
223
|
### Custom styling not working?
|
|
202
224
|
When using the `classes` prop, make sure your CSS classes have higher specificity or use `!important` if needed.
|
|
203
225
|
|
|
204
|
-
## License
|
|
205
|
-
|
|
206
|
-
MIT © Saad Nasir
|
|
207
|
-
|
|
208
226
|
## Author
|
|
209
227
|
|
|
210
228
|
**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.6",
|
|
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",
|