react-confirm-lite 1.2.3 → 1.2.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Saad Nasir
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,35 +1,36 @@
 # react-confirm-lite
 
-**A lightweight, promise-based confirm dialog for React with built-in Tailwind CSS support**
+**A lightweight, promise-based confirm dialog for React with built-in styling**
 
 ✨ **Features:**
 - Promise-based API like window.confirm
-- Built-in Tailwind CSS styling
+- Built-in styling with multiple color schemes
 - Zero dependencies
 - Fully customizable
 - TypeScript support
 - Queue system for multiple dialogs
+- Works with Next.js App Router (no 'use client' needed)
+- Automatic CSS injection (no separate imports needed)
 ---
 
-## Recomendations
-- There were some problems in old versions so I will suggest you to use the latest version. If you are not on latest versions then update it otherwise you may face some problems.
-- If you face any problem in the latest version then tell me your problem [@SaadNasir-git](https://github.com/SaadNasir-git).
+## Recommendations
+- Always use the latest version for bug fixes and improvements
+- If you face any issues, please report them on [GitHub](https://github.com/SaadNasir-git/react-confirm-lite/issues)
 
 ## Quick Comparison
 
 | Feature | react-confirm-lite | react-confirm | react-confirm-toast |
 |---------|-------------------|---------------|---------------------|
-| Built-in styling | ✅ Tailwind CSS | ❌ None | ✅ Toast style |
+| Built-in styling | ✅ Multiple color schemes | ❌ None | ✅ Toast style |
 | Promise-based | ✅ | ✅ | ✅ |
 | Zero dependencies | ✅ | ✅ | ✅ |
 | Queue system | ✅ | ❌ | ❌ |
-| Fully customizeable | ✅ | ✅ | ✅ |
+| Automatic CSS | ✅ No separate imports | ❌ | ❌ |
+| Next.js App Router | ✅ Works out of the box | ❌ Needs 'use client' | ✅ |
 
 ## Why Choose react-confirm-lite?
 
-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.
-
-![react-confirm-lite Sample](https://res.cloudinary.com/dhcqn5bmq/image/upload/v1765971775/Screencastfrom2025-12-1716-38-30-ezgif.com-optimize_ydzrow.gif)
+If you want a **simple, lightweight** confirm dialog that **just works** without any configuration, `react-confirm-lite` is perfect. No separate CSS imports, no 'use client' directives needed in Next.js App Router, and fully customizable when you need it.
 
 ## 🔗 Live Demo
 
@@ -42,263 +43,336 @@ If you're using **Tailwind CSS** and want a **simple, lightweight** confirm dial
 npm install react-confirm-lite
 ```
 
-### Step 2: import
-```ts
-import { confirm, ConfirmContainer } from 'react-confirm-lite'
+### Step 2: Import in your component:
+```tsx
+import { confirm, ConfirmContainer } from 'react-confirm-lite';
 ```
-### Step 3: Use ConfirmContainer in your jsx or tsx file
+
+### Step 3: Add ConfirmContainer to your component tree:
 ```jsx
-return (
+function App() {
+  return (
     <>
       <ConfirmContainer />
+      {/* Your app content */}
     </>
-)
-```
-### Step 4: Use confirm function
-```ts
-  const main = async () => {
-    const isConfirmed = await confirm('Are you sure');
-    if (isConfirmed) {
-      console.log('you are confirmed')
-    }
-  }
+  );
+}
 ```
-or
-```ts
-  const main = async () => {
-    const isConfirmed = await confirm({
-      title: "Delete Item",
-      message:'Are you sure?',
-      cancelText:'no',
-      okText:'yes',
-      colorSchema:'dark'
-    });
-    if (isConfirmed) {
-      console.log('you are confirmed')
-    }
+
+### Step 4: Use the confirm function:
+```tsx
+const handleAction = async () => {
+  const isConfirmed = await confirm('Are you sure?');
+  if (isConfirmed) {
+    // Perform action
+    console.log('Confirmed!');
   }
+};
 ```
-## Complete Example
+
+### Complete Example:
 
 ```tsx
-'use client' //If you are using nextjs then add this line
-import { confirm, ConfirmContainer } from 'react-confirm-lite'
+import { confirm, ConfirmContainer } from 'react-confirm-lite';
 
-export default function Page() {
+function App() {
   const handleDelete = async () => {
-    const isConfirmed = await confirm('Are you sure you want to delete?')
+    const isConfirmed = await confirm('Are you sure you want to delete this item?');
     if (isConfirmed) {
-      // Perform deletion
-      console.log('Item deleted')
+      // Delete logic here
+      console.log('Item deleted');
     }
-  }
+  };
 
   return (
     <div>
       <button onClick={handleDelete}>Delete Item</button>
       <ConfirmContainer />
     </div>
-  )
+  );
 }
 ```
-## How to customize
-If you just want to change the colorSchema then you can do this
-```jsx
-<ConfirmContainer defaultColorSchema='light'/>
-```
-There are multiple color schemas which are
 
-- light
-- dark
-- blue
-- red
-- green
-- purple
+## Advanced Usage
 
-You can customize it by giving classes like this
-```jsx
-<ConfirmContainer classes={{button:'text-sm' , cancel:'bg-white-100' , ok:'bg-red-500' , message:'text-gray-600' , overlay:'bg-white-100' , title:'text-2xl' , wrapper:'bg-blue-500'}}/>
-```
-If you want more customization then you can pass children like this
-```jsx
-  return (
-    <div>
-      <ConfirmContainer animationDuration={1000}>
-        {({ isVisible, confirm, handleCancel, handleOk }) => (
-          <div className={`bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4 ${!isVisible ? 'ease-out duration-1000 opacity-0' : 'ease-in duration-1000 opacity-100'}
-    `}>
-            <h2 className="text-lg font-medium text-gray-900 mb-2 text-center">
-              {confirm.title}
-            </h2>
-
-            <p className="text-gray-500 text-center mb-6">
-              {confirm.message}
-            </p>
-
-            <div className="flex gap-3 w-full">
-              <button
-                className="flex-1 py-2 px-4 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
-                onClick={handleCancel}
-              >
-                {confirm.cancelText || 'Cancel'}
-              </button>
-              <button
-                className="flex-1 py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-                onClick={handleOk}
-              >
-                {confirm.okText || 'Ok'}
-              </button>
-            </div>
-          </div>
-        )}
-      </ConfirmContainer>
-    </div>
-  )
+### Custom Options:
+```tsx
+const handleCustomConfirm = async () => {
+  const isConfirmed = await confirm({
+    title: "Delete Item",
+    message: "This action cannot be undone. Are you sure?",
+    cancelText: 'No, keep it',
+    okText: 'Yes, delete',
+    colorSchema: 'red',
+    isDestructive: true
+  });
+  
+  if (isConfirmed) {
+    // Delete item
+  }
+};
 ```
-Use `isVisible` parameter if you want your custom animation.
 
-## Using with Next.js and want to add the ConfirmContainer in layout.tsx
-If you will directly add the ConfirmContainer in layout.tsx then it will throw an error this problem can be solve easily.
-Make the client side component and then add the ConfirmContainer in this client side component like this.
+### Custom Color Scheme:
 ```jsx
-'use client'
-import { ConfirmContainer } from "react-confirm-lite"
-
-const ClientSideConfirm = () => {
-    return (
-        <>
-            <ConfirmContainer />
-        </>
-    )
-}
-
-export default ClientSideConfirm
+<ConfirmContainer defaultColorSchema="light" />
+// Available options: 'light', 'dark', 'blue', 'red', 'green', 'purple'
 ```
-and then simply use this component in layout.tsx
-
-## Installation
-
-```bash
-npm install react-confirm-lite
-# or
-yarn add react-confirm-lite
-# or
-pnpm add react-confirm-lite
-```
-
-## Props
-
-### ConfirmContainer
-- `animationDuration` (optional): Animation duration in milliseconds. Default: `300`
-- `defaultColorSchema` (optional): To change color schema. Default: `dark`
-- `classes` (optional): Custom CSS classes for styling
-- `children` (optional): Render prop for complete customization
-
-## TypeScript Support
 
-Fully typed with TypeScript. Includes types for all props and the confirm function.
-
-## More Examples
-
-### Custom Styling with Classes
-```tsx
-<ConfirmContainer
+### Custom Styling:
+```jsx
+<ConfirmContainer 
   classes={{
-    overlay: "bg-black/70",
-    wrapper: "rounded-xl border-2",
-    title: "font-bold text-xl",
+    overlay: "bg-black/50",
+    wrapper: "rounded-xl shadow-2xl",
+    title: "text-2xl font-bold",
     message: "text-gray-600",
-    button: "px-6 py-2 rounded-lg",
-    cancel: "bg-gray-200 hover:bg-gray-300",
-    ok: "bg-green-600 hover:bg-green-700 text-white"
+    button: "px-6 py-3 rounded-lg font-medium",
+    cancel: "border border-gray-300 hover:bg-gray-50",
+    ok: "bg-blue-600 hover:bg-blue-700 text-white"
   }}
 />
 ```
+
+### Fully Custom UI with Render Prop:
 ```jsx
-<ConfirmContainer>
+<ConfirmContainer animationDuration={500}>
   {({ isVisible, confirm, handleCancel, handleOk }) => (
-    <div className={`dialog ${isVisible ? 'show' : 'hide'}`}>
-      <div className="icon">⚠️</div>
-      <h3>{confirm.title}</h3>
-      <p>{confirm.message}</p>
-      <div className="buttons">
-        <button onClick={handleCancel}>{confirm.cancelText || 'No'}</button>
-        <button onClick={handleOk}>{confirm.okText || 'Yes'}</button>
+    <div className={`modal ${isVisible ? 'show' : 'hide'}`}>
+      <div className="modal-content">
+        <h2>{confirm.title}</h2>
+        <p>{confirm.message}</p>
+        <div className="modal-actions">
+          <button onClick={handleCancel}>
+            {confirm.cancelText || 'Cancel'}
+          </button>
+          <button onClick={handleOk}>
+            {confirm.okText || 'OK'}
+          </button>
+        </div>
       </div>
     </div>
   )}
 </ConfirmContainer>
 ```
+
+## Next.js App Router Support
+
+Works automatically! No 'use client' directive needed for the library. The library handles everything internally.
+
+### Server Components Example:
+```tsx
+// app/layout.tsx
+import { ConfirmContainer } from 'react-confirm-lite';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <ConfirmContainer />
+      </body>
+    </html>
+  );
+}
+```
+```tsx
+// app/page.tsx (server component)
+import { confirm } from 'react-confirm-lite';
+
+export default async function Page() {
+  // Server-side logic here
+  
+  return (
+    <form action={async () => {
+      'use server';
+      const isConfirmed = await confirm('Are you sure?');
+      if (isConfirmed) {
+        // Server action
+      }
+    }}>
+      <button>Submit</button>
+    </form>
+  );
+}
+```
+
+### Client Component Example:
+```tsx
+'use client';
+import { confirm, ConfirmContainer } from 'react-confirm-lite';
+
+export default function ClientComponent() {
+  const handleClick = async () => {
+    const result = await confirm('Confirm action?');
+    if (result) {
+      // Handle confirmation
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={handleClick}>Click me</button>
+      <ConfirmContainer />
+    </div>
+  );
+}
+```
+
 ## API Reference
 
 ### `confirm(message: string | ConfirmOptions): Promise<boolean>`
 
-Displays a confirmation dialog and returns a promise that resolves to `true` (confirmed) or `false` (cancelled).
+Displays a confirmation dialog. Returns a promise that resolves to `true` if confirmed, `false` if cancelled.
 
-**Parameters:**
-- `message`: String or object with `title` and `message` properties
-**Examples:**
+**String usage:**
 ```ts
-// Simple string
-await confirm('Are you sure?')
+await confirm('Simple message');
+// Equivalent to: { title: 'Confirm', message: 'Simple message' }
+```
 
-// With custom title
+**Object usage:**
+```ts
 await confirm({
   title: 'Warning',
   message: 'This action cannot be undone',
-  cancelText:'no',
-  okText:'yes',
-  colorSchema:'dark'
-})
+  cancelText: 'Cancel',
+  okText: 'Delete',
+  colorSchema: 'red',
+  isDestructive: true
+});
 ```
-## Types
-You can also import types which I think you may need some times these are following:
 
-- ConfirmInput
-- ConfirmOptions
-- ConfirmClasses
-- ColorSchema
+### `ConfirmContainer` Props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `defaultColorSchema` | `ColorSchema` | `'dark'` | Default color scheme |
+| `animationDuration` | `number` | `300` | Animation duration in ms |
+| `classes` | `ConfirmClasses` | `{}` | Custom CSS classes |
+| `children` | Render function | - | For complete UI customization |
+
+### Types:
+```ts
+type ColorSchema = 'light' | 'dark' | 'blue' | 'red' | 'green' | 'purple';
+
+interface ConfirmClasses {
+  overlay?: string;
+  wrapper?: string;
+  title?: string;
+  message?: string;
+  button?: string;
+  cancel?: string;
+  ok?: string;
+}
+
+interface ConfirmOptions {
+  title?: string;
+  message: string;
+  cancelText?: string;
+  okText?: string;
+  colorSchema?: ColorSchema;
+  isDestructive?: boolean;
+}
+```
 
 ## Troubleshooting
 
-### Dialog not showing?
-Make sure you've added `<ConfirmContainer />` to your component tree.
+### ❌ Dialog not appearing?
+- Make sure `<ConfirmContainer />` is rendered in your component tree
+- Check that you're not conditionally rendering it in a way that unmounts it
 
-### Multiple confirms overlapping?
-The library includes a built-in queue system to handle multiple confirm requests.
+### ❌ Multiple dialogs overlapping?
+- The library has a built-in queue system that handles multiple confirm requests sequentially
 
-### Custom styling not working?
-When using the `classes` prop, make sure your CSS classes have higher specificity or use `!important` if needed.
+### ❌ Styling not working?
+- If using custom classes, ensure they have proper CSS specificity
+- Try using `!important` flag for custom styles if needed
+- Make sure you're on the latest version
 
-### Rendering again and again
-Yes this problem I were noticed in the early versions but I have fixed it. So, make sure that you have the latest version of this.
+### ❌ Animation issues with custom UI?
+- When using the `children` render prop, use the `isVisible` prop for animations
+- Set appropriate `animationDuration` to match your CSS transitions
 
-### Dialog closing after some time
-If you are making your custom dialog then you can face this problem so make sure that you have added animationDuration like this
+### ❌ Next.js hydration errors?
+- The library is designed to work with Next.js App Router
+- If using in a layout, ensure it's placed after dynamic content
 
-### Custom styling does not working
-This problem exists in old version so, make sure that you are using the latest version and if you are on latest version but it is not working yet then use !important flag in your css file
+## Features in Detail
 
-```tsx
-<ConfirmContainer animationDuration={0}>
-    {/*Your code*/}
-</ConfirmContainer>
-```
+### 🎨 Multiple Color Schemes
+Six built-in color schemes: light, dark, blue, red, green, purple. Set globally or per confirm dialog.
+
+### 🔄 Queue System
+Multiple confirm requests are queued and shown one at a time, preventing overlapping dialogs.
+
+### 🎯 Zero Configuration
+Works out of the box with default styling. No CSS imports needed.
+
+### 🔧 Fully Customizable
+From simple class overrides to complete UI replacement with render props.
+
+### 📱 Responsive Design
+Built-in responsive styling that works on all screen sizes.
+
+### 🔒 Type Safety
+Full TypeScript support with comprehensive type definitions.
+
+## Performance
+
+- **Zero dependencies**: Only React as a peer dependency
+- **Tree-shakeable**: Only imports what you use
+- **Small bundle size**: ~5KB gzipped (including styles)
+- **Optimized renders**: Minimal re-renders with React.memo
+
+## Migration from Older Versions
+
+If you're upgrading from version <1.3.0:
+
+1. **'use client' not needed**: The library handles this internally
+2. **Simpler API**: Same functions, better internals
+
+
+## Contributing
+
+Contributions are welcome! Please:
+
+1. Fork the repository
+2. Create a feature branch
+3. Add tests for your changes
+4. Submit a pull request
 
 ## Author
 
-My name is **Saad Nasir**. I am a full stack web developer and I am alone who is working on this so please contribute with me to make it more better.
+**Saad Nasir** - Full Stack Developer
 - GitHub: [@SaadNasir-git](https://github.com/SaadNasir-git)
-- Facebook: [@Saad Nasir](https://www.facebook.com/profile.php?id=61583190691187)
-## Contributing
+- For support: Open an issue on GitHub
+
+## License
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+MIT © Saad Nasir
 
+---
 
 ![npm version](https://img.shields.io/npm/v/react-confirm-lite)
 ![bundle size](https://img.shields.io/bundlephobia/minzip/react-confirm-lite)
 ![npm downloads](https://img.shields.io/npm/dm/react-confirm-lite)
 ![license](https://img.shields.io/npm/l/react-confirm-lite)
 ![typescript](https://img.shields.io/badge/types-TypeScript-blue)
-![react](https://img.shields.io/badge/react-%3E%3D16.8-blue)
-![maintenance](https://img.shields.io/badge/maintained-yes-brightgreen)
+![react](https://img.shields.io/badge/react-%3E%3D18-blue)
+![next.js](https://img.shields.io/badge/next.js-15+-black)
+
+## Support
+
+If you find this library helpful, please consider:
+- ⭐ Starring the repository on GitHub
+- 📢 Sharing with your network
+- 🐛 Reporting issues you encounter
+- 💡 Suggesting new features
+
+Happy coding! 🚀

package/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Saad Nasir
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.