Maxom-Modal

A lightweight, reusable and customizable React modal component built for modern applications.

Features

• Simple and quick integration
• Reusable component
• Responsive design
• Close on overlay click
• Close with Escape key
• Custom width support
• Custom footer support
• No external CSS import required
• Compatible with React 18 and 19

Installation

npm install maxom-modal

Basic Usage

import { useState } from "react";
import Modal from "maxom-modal";

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

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

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Employee Created"
      >
        <p>The employee has been added successfully.</p>
      </Modal>
    </>
  );
}

export default App;

Customization

| Prop | Type | Default | Description | | ----------------- | -------- | -------- | --------------------------------- | | isOpen | boolean | false | Controls modal visibility | | onClose | function | required | Function called to close modal | | title | string | "" | Modal title | | children | node | - | Modal content | | width | string | "500px" | Custom modal width | | closeOnOverlay | boolean | true | Close modal when clicking outside | | closeOnEscape | boolean | true | Close modal with Escape key | | showCloseButton | boolean | true | Display close button | | footer | node | null | Custom footer content |

You can override default styles with your own CSS:

.modal-content {
  background: #f9fafb;
}

License

This project is completely free & open under an MIT License.

Author

Maxime Mauracheea