@droomwolk/react-a11y-modal

A reusable, accessible, and modern React modal component built by Droomwolk.

📑 Table of Contents

• 📦 Installation
• 🧩 Usage Example
• 🖌️ Import Styles
• ⚙️ Component Interface
• ⌨️ Keyboard Support
• 🎨 Default CSS Classes
• 💭 Minimal Style Example
• 🌐 Local Development
• 🔒 License
• 👤 Author

🚀 Installation

Install the package using npm:

npm install @droomwolk/react-a11y-modal

or with Yarn:

yarn add @droomwolk/react-a11y-modal

🧩 Usage Example

import { useState } from "react";
import { Modal } from "@droomwolk/react-a11y-modal";

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

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open modal</button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Accessible Modal"
        message="🎉 Hello from @droomwolk/react-a11y-modal!"
        okLabel="Close"
        onOk={() => setIsOpen(false)}
      />
    </>
  );
}

🖌️ Import Styles

To use the default theme, import the provided stylesheet:

import "@droomwolk/react-a11y-modal/dist/modal.css";

If you prefer a custom design, override the CSS classes to match your own style system.

⚙️ Component Interface

| Prop | Type | Description | Default | |------|------|--------------|----------| | isOpen | boolean | Controls modal visibility | false | | onClose | () => void | Triggered when modal closes | — | | onOk | () => void | Triggered when clicking the OK button | — | | title | string | Title displayed at the top | "Modal" | | message | string | Simple text message below the title | "" | | children | ReactNode | Custom JSX inside the modal | undefined | | showCloseButton | boolean | Shows or hides the ✕ button | true | | okLabel | string | Label for the main action button | "OK" | | closeOnBackdropClick | boolean | Allows closing by clicking the backdrop | true | | className | string | Additional CSS class for .modal | "" | | style | React.CSSProperties | Inline style for .modal | {} | | closeButtonStyle | React.CSSProperties | Inline style for the ✕ button | {} | | actionsClassName | string | Custom class for .modal-actions | "" | | actionsStyle | React.CSSProperties | Inline styles for .modal-actions | {} |

⌨️ Keyboard Support

| Key | Action | |-----|--------| | Escape | Closes the modal (onClose) | | Enter | Confirms the modal (onOk) |

🎨 Default CSS Classes

| Element | Class | |----------|--------| | Backdrop overlay | .modal-backdrop | | Main container | .modal | | Header section | .modal-header | | Title text | .modal-title | | Close button | .modal-close | | Body / Content | .modal-body | | Action area | .modal-actions |

💭 Minimal Style Example

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

.modal {
  width: 550px;
  max-width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
  overflow: hidden;
  animation: modalIn .18s ease-out;
}

.modal-header {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f8f8f8;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #0a2540; /* Navy */
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #dc143c;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.modal-close:hover { background: #f2f2f2; }

.modal-body {
  padding: 18px;
  color: #333;
  font-size: 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 18px 18px;
}

.btn-primary {
  background-color: #0a2540;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-primary:hover {
  background-color: #003366;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalIn {
  from { transform: translateY(-10px); opacity: 0.8; }
  to { transform: translateY(0); opacity: 1; }
}

🌐 Local Development

git clone https://github.com/droomwolk/react-a11y-modal.git
cd react-a11y-modal
npm install

Then modify the code inside src/ and publish a new version:

npm version patch
npm publish --access public

🔒 License

This project is licensed under the MIT License — see the LICENSE file for details.

👤 Author

Developed by Mickaël Beljio
💻 GitHub: @droomwolk
🌐 Website: https://droomwolk.dev