react-alertify-lite

A beautiful, animated alert modal component for React with Tailwind CSS. Features smooth animations, multiple alert types, custom icons, and full customization.

📘 Table of Contents

• 🚀 Features
• 📦 Installation
• ⚛️ Quick Start
• 💡 Usage Examples
• 🧠 API Reference
• 🎨 Styling
• ⚙️ Requirements
• 🌐 Browser Support
• 🤝 Contributing
• 🪪 License
• 👨‍💻 Author
• 💬 Support

🚀 Features

• 4 Alert Types: Info, Warning, Success, Danger with distinct colors and icons
• Smooth Animations: Beautiful fade, scale, and bounce effects
• Custom Icons: Use any icon library for alerts and buttons
• Responsive Design: Works perfectly on all screen sizes
• Lightweight: Minimal dependencies, optimized bundle size
• TypeScript: Full type safety and IntelliSense support
• Accessible: Keyboard navigation (ESC to close, click outside to dismiss)
• Loading States: Built-in loading spinner for async operations
• Flexible Sizing: 5 size options from small to full-screen
• Framework Support: Works with React and Next.js (App Router & Pages Router)

📦 Installation

npm install react-alertify-lite

or with yarn:

yarn add react-alertify-lite

or with pnpm:

pnpm add react-alertify-lite

🚀 Quick Start

⚛️ React

import { useState } from 'react';
import AlertModal from 'react-alertify-lite';
import 'react-alertify-lite/dist/animations.css';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Show Alert
      </button>

      <AlertModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onConfirm={() => {
          console.log('Confirmed!');
          setIsOpen(false);
        }}
        type="danger"
        title="Delete Account"
        message="Are you sure you want to delete your account?"
        description="This action cannot be undone. All your data will be permanently removed."
        confirmText="Delete"
        cancelText="Cancel"
      />
    </>
  );
}

🧭 Next.js (App Router)

Since AlertModal uses client-side features, you need to use it in a Client Component:

import { useState } from 'react';
import AlertModal from 'react-alertify-lite';
import 'react-alertify-lite/dist/animations.css';

export default function Page() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Show Alert
      </button>

      <AlertModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onConfirm={() => {
          console.log('Confirmed!');
          setIsOpen(false);
        }}
        type="danger"
        title="Delete Account"
        message="Are you sure you want to delete your account?"
        confirmText="Delete"
        cancelText="Cancel"
      />
    </>
  );
}

Or create a separate client component:

import { useState } from 'react';
import AlertModal from 'react-alertify-lite';
import 'react-alertify-lite/dist/animations.css';

export function DeleteButton() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Delete</button>
      <AlertModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onConfirm={() => setIsOpen(false)}
        type="danger"
        title="Delete Item"
        message="Are you sure?"
      />
    </>
  );
}

Then use it in your server component:

import { DeleteButton } from '@/components/delete-button';

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <DeleteButton />
    </div>
  );
}

🧭 Next.js (Pages Router)

import { useState } from 'react';
import AlertModal from 'react-alertify-lite';
import 'react-alertify-lite/dist/animations.css';

export default function Home() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Show Alert
      </button>

      <AlertModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onConfirm={() => setIsOpen(false)}
        type="danger"
        title="Delete Account"
        message="Are you sure?"
      />
    </>
  );
}

💡 Usage Examples

🔔 Basic Alert Types

❌ Danger Alert (Red)

<AlertModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  onConfirm={handleDelete}
  type="danger"
  title="Delete Item"
  message="This action cannot be undone"
  confirmText="Delete"
/>

⚠️ Warning Alert (Yellow)

<AlertModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  onConfirm={handleProceed}
  type="warning"
  title="Warning"
  message="Please review before proceeding"
  confirmText="Continue"
/>

✅ Success Alert (Green)

<AlertModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  onConfirm={handleNext}
  type="success"
  title="Success!"
  message="Your changes have been saved"
  confirmText="OK"
/>

ℹ️ Info Alert (Blue)

<AlertModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  onConfirm={handleAcknowledge}
  type="info"
  title="Information"
  message="Here's something you should know"
  confirmText="Got it"
/>

🧩 Custom Icons

You can customize the alert icon and add icons to buttons using any icon library:

import { FaRocket } from 'react-icons/fa';
import { IoMdCheckmark, IoMdClose } from 'react-icons/io';

<AlertModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  onConfirm={handleLaunch}
  type="success"
  title="Launch Ready!"
  message="Your project is ready to deploy"
  description="Click confirm to launch your application to production."
  customIcon={FaRocket}
  confirmIcon={IoMdCheckmark}
  cancelIcon={IoMdClose}
  confirmText="Launch"
  cancelText="Cancel"
/>

⏳ With Loading State

const [isLoading, setIsLoading] = useState(false);

const handleConfirm = async () => {
  setIsLoading(true);
  await performAsyncOperation();
  setIsLoading(false);
  setIsOpen(false);
};

<AlertModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  onConfirm={handleConfirm}
  type="danger"
  title="Delete Account"
  message="Are you sure?"
  isLoading={isLoading}
  confirmText="Delete"
/>

📏 Different Sizes

// Small
<AlertModal size="sm" {...props} />

// Medium (default)
<AlertModal size="md" {...props} />

// Large
<AlertModal size="lg" {...props} />

// Extra Large
<AlertModal size="xl" {...props} />

// Full Screen
<AlertModal size="full" {...props} />

🧠 API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | boolean | required | Controls modal visibility | | onClose | () => void | required | Called when modal should close | | onConfirm | () => void | required | Called when confirm button is clicked | | type | 'info' \| 'warning' \| 'success' \| 'danger' | 'danger' | Alert type (changes colors and default icon) | | title | string | '' | Modal title text | | message | string | required | Main message text | | description | string | undefined | Additional description text (optional) | | size | 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' | 'md' | Modal size | | confirmText | string | 'Confirm' | Confirm button text | | cancelText | string | 'Cancel' | Cancel button text | | isLoading | boolean | false | Shows loading spinner on confirm button | | customIcon | React.ComponentType<{ className?: string }> | undefined | Custom icon component for the alert | | confirmIcon | React.ComponentType<{ className?: string }> | undefined | Icon for the confirm button | | cancelIcon | React.ComponentType<{ className?: string }> | undefined | Icon for the cancel button |

🎨 Styling

The component uses Tailwind CSS for styling. Make sure you have Tailwind CSS installed in your project.

💫 Import Animations

Don't forget to import the animations CSS file:

import 'react-alertify-lite/dist/animations.css';

🧵 Custom Styling

You can customize the appearance by overriding the CSS classes or by using Tailwind's configuration.

⚙️ Requirements

• React 18+ or React 19+
• Tailwind CSS (for styling)
• react-icons (included as dependency)

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🪪 License

MIT License - see LICENSE file for details

👨‍💻 Author

Tanvir Faysal

💬 Support

If you find this package helpful, please consider giving it a star on GitHub!

For issues and feature requests, please use the GitHub issues page.