React Dialog Component

A lightweight, accessible, and customizable dialog component for React applications.

Installation

npm install @yourusername/react-dialog

Features

• 🎯 Fully accessible dialog implementation
• 🌟 TypeScript support
• 🎨 Customizable styles with Tailwind CSS
• 🔑 Close on overlay click
• ⌨️ Close on ESC key
• 📱 Responsive design

Usage

import { Dialog } from '@yourusername/react-dialog';

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

  return (
    <Dialog
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      title="Example Dialog"
    >
      <div>Your dialog content here</div>
    </Dialog>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | boolean | required | Controls the visibility of the dialog | | onClose | () => void | required | Function called when the dialog should close | | title | string | undefined | Optional title for the dialog | | children | ReactNode | required | Content of the dialog | | className | string | '' | Additional classes for the dialog content | | overlayClassName | string | '' | Additional classes for the dialog overlay | | closeOnOverlayClick | boolean | true | Whether clicking the overlay closes the dialog | | closeOnEsc | boolean | true | Whether pressing ESC closes the dialog |

License

MIT