react-animated-ui/docs/PopupModal.md

A React UI library featuring animated components including buttons, forms, dropdowns, date pickers, and more.

---


## docs/PopupModal.md

```md
# Popup Modal

## Description  
A flexible popup modal component with animated open and close transitions. Useful for dialogs, alerts, forms, and more.

---


## Props

| Prop          | Type                         | Default       | Description                                  |
|---------------|------------------------------|---------------|----------------------------------------------|
| `isOpen`      | `boolean`                    | `false`       | Controls whether the modal is visible         |
| `onClose`     | `() => void`                 | `-`           | Callback fired when the modal requests to close (e.g., overlay click or close button) |
| `children`    | `React.ReactNode`            | `-`           | Modal content                                |
| `className`   | `string`                     | `""`          | Custom CSS class for styling                   |
| `closeOnOverlayClick` | `boolean`             | `true`        | Whether clicking outside modal closes it     |

---


## Usage

```tsx
import React, { useState } from 'react';
import { PopupModal, AnimatedButton } from 'react-animated-ui';

function MyComponent() {
  const [isModalOpen, setModalOpen] = useState(false);

  return (
    <>
      <AnimatedButton onClick={() => setModalOpen(true)}>Open Modal</AnimatedButton>

      <PopupModal
        isOpen={isModalOpen}
        onClose={() => setModalOpen(false)}
        closeOnOverlayClick={true}
        className="custom-modal"
      >
        <h2>Modal Title</h2>
        <p>This is modal content with smooth animation.</p>
        <AnimatedButton onClick={() => setModalOpen(false)}>Close</AnimatedButton>
      </PopupModal>
    </>
  );
}