@adhrnet/modal

A reusable and accessible React modal component built by ADHRNET.

📑 Table of Contents

1. 📦 Installation
2. 🧩 Usage Example
3. 🖌️ Import Styles
4. ⚙️ Component Interface
5. ⌨️ Keyboard Support
6. 🎨 Default CSS Classes
7. 💭 Minimal Style Example
8. 🌐 Local Development
9. 🔒 License
10. 👤 Author

🚀 Installation

Install the library from npm :

npm install @adhrnet/modal

or with Yarn :

yarn add @adhrnet/modal

🧩 Usage Example

import { useState } from "react";
import { Modal } from "@adhrnet/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="Generic modal"
        message="👋 Hello from the modal ! 👋"
        okLabel="Close"
        onOk={() => setIsOpen(false)}
      />
    </>
  );
}

🖌️ Import Styles

To apply the default Navy theme, import the CSS provided with the package:

import "@adhrnet/modal/dist/modal.css";

If you prefer your own design, simply override the CSS classes.

⚙️ Component Interface

| Prop | Type | Description | Default | | ---------------------- | -------- | --------------------------------------------- | ----------- | | isOpen | boolean | Controls whether the modal is shown or hidden | false | | onClose | function | Triggered when closing | — | | onOk | function | Triggered when clicking the OK button | — | | title | string | Title displayed at the top | "Modal" | | message | string | Simple text message below the title | "" | | children | node | Custom JSX content inside the modal | undefined | | showCloseButton | boolean | Shows or hides the ✕ button | true | | okLabel | string | Label of the main action button | "OK" | | closeOnBackdropClick | boolean | Allows closing by clicking the backdrop | true | | className | string | Extra CSS class added to .modal | "" | | style | object | Inline styles for .modal | {} | | closeButtonStyle | object | Inline styles for the ✕ button | {} | | actionsClassName | string | CSS class for .modal-actions | "" | | actionsStyle | object | Inline styles for .modal-actions | {} |

⌨️ Keyboard Support

| Key | Action | | ---------- | ------------------------------------------- | | Escape | Closes the modal (onClose) | | Enter | Validate the modal (onOk, if defined) |

🎨 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: 1px solid #dcdcdc;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
  overflow: hidden;
  animation: modalIn .18s ease-out;
}

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

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

.modal-close {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #DC143C; /* Crimson */
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.modal-close:hover { background: #f2f2f2; }

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

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

.btn-primary {
  background-color: #001f3f; /* Navy */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-primary:hover {
  background-color: #003366; /* Lighter navy on hover */
}

/* --- ANIMATIONS --- */
@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/Tigershark936/modal-library.git
cd modal-library
npm install

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

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
Alain
Mon GitHub: ⚡Find me on GitHub ⚡