ade-modal-package v1.2.0

React Modal Package

This package provides a flexible and customizable modal component for React applications. It supports multiple modal types, smooth transitions, and various customization options to fit different UI needs.

Features

• Multiple Modal Types: Success, Warning, Error, Info, and Custom modals.
• Customizable Appearance: Modify colors, sizes, and styles easily.
• Smooth Animations: Built-in fade-in and slide-in effects.
• Keyboard & Click Dismiss: Users can close modals by clicking outside or pressing Esc.
• Lightweight & Fast: Optimized for performance with minimal dependencies.

Installation

To install the modal package, use:

npm install npm install ade-modal-package tailwindcss lucide-react

or with yarn:

yarn add npm install ade-modal-package tailwindcss lucide-react

Usage

Basic Example

import React, { useState } from 'react';
import { Modal } from '@your-modal-package';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)} className="bg-blue-500 text-white px-4 py-2 rounded">
        Open Modal
      </button>

      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <h2 className="text-xl font-semibold">Welcome!</h2>
        <p className="text-gray-600">This is a customizable modal component.</p>
      </Modal>
    </div>
  );
};

export default App;

Modal Props

Customization

You can customize the modal styles using CSS classes or inline styles. If using TailwindCSS, extend styles directly:

<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} className="bg-white p-6 rounded-lg shadow-lg">
  <h2 className="text-xl font-bold">Custom Styled Modal</h2>
</Modal>

License

MIT License

For more details, check the documentation.