MFE2 Modal Component

A lightweight, accessible, and customizable React modal component designed for micro frontend applications.

Features

• 🎯 TypeScript Support - Full TypeScript support with proper type definitions
• ♿ Accessibility - ARIA attributes, keyboard navigation, and screen reader support
• 📱 Responsive Design - Works seamlessly on desktop and mobile devices
• 🎨 Customizable - Multiple size options and custom styling support
• 🔧 Flexible - Easy to integrate into any React application
• 🚀 Lightweight - Minimal bundle size with no external dependencies
• 🎭 Animations - Smooth enter/exit animations with reduced motion support

Installation

npm install @mfe2/modal-component

or

yarn add @mfe2/modal-component

Quick Start

import React from 'react';
import { Modal, useModal } from '@mfe2/modal-component';

function App() {
  const { isOpen, openModal, closeModal } = useModal();

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      
      <Modal
        isOpen={isOpen}
        onClose={closeModal}
        title="Welcome to MFE2 Modal"
        size="medium"
      >
        <p>This is the modal content. You can put anything here!</p>
        <button onClick={closeModal}>Close</button>
      </Modal>
    </div>
  );
}

API Reference

Modal Component

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | boolean | - | Controls whether the modal is visible | | onClose | () => void | - | Callback function called when modal should close | | title | string | - | Optional title displayed in the modal header | | children | React.ReactNode | - | Content to display inside the modal | | size | 'small' \| 'medium' \| 'large' | 'medium' | Size of the modal | | closeOnOverlayClick | boolean | true | Whether clicking outside closes the modal | | closeOnEscape | boolean | true | Whether pressing Escape closes the modal | | showCloseButton | boolean | true | Whether to show the close button | | className | string | - | Additional CSS classes for the modal | | overlayClassName | string | - | Additional CSS classes for the overlay |

useModal Hook

Returns an object with modal state and control functions:

const { isOpen, openModal, closeModal, toggleModal } = useModal(initialState);

| Property | Type | Description | |----------|------|-------------| | isOpen | boolean | Current open/closed state | | openModal | () => void | Function to open the modal | | closeModal | () => void | Function to close the modal | | toggleModal | () => void | Function to toggle the modal state |

Examples

Basic Modal

import { Modal, useModal } from '@mfe2/modal-component';

function BasicModal() {
  const { isOpen, openModal, closeModal } = useModal();

  return (
    <>
      <button onClick={openModal}>Open Basic Modal</button>
      
      <Modal isOpen={isOpen} onClose={closeModal}>
        <h2>Basic Modal</h2>
        <p>This is a simple modal without a title.</p>
      </Modal>
    </>
  );
}

Modal with Title and Different Sizes

import { Modal, useModal } from '@mfe2/modal-component';

function SizedModals() {
  const { isOpen: isSmallOpen, openModal: openSmall, closeModal: closeSmall } = useModal();
  const { isOpen: isMediumOpen, openModal: openMedium, closeModal: closeMedium } = useModal();
  const { isOpen: isLargeOpen, openModal: openLarge, closeModal: closeLarge } = useModal();

  return (
    <>
      <button onClick={openSmall}>Small Modal</button>
      <button onClick={openMedium}>Medium Modal</button>
      <button onClick={openLarge}>Large Modal</button>
      
      <Modal
        isOpen={isSmallOpen}
        onClose={closeSmall}
        title="Small Modal"
        size="small"
      >
        <p>This is a small modal (400px width).</p>
      </Modal>
      
      <Modal
        isOpen={isMediumOpen}
        onClose={closeMedium}
        title="Medium Modal"
        size="medium"
      >
        <p>This is a medium modal (600px width).</p>
      </Modal>
      
      <Modal
        isOpen={isLargeOpen}
        onClose={closeLarge}
        title="Large Modal"
        size="large"
      >
        <p>This is a large modal (800px width).</p>
      </Modal>
    </>
  );
}

Custom Styled Modal

import { Modal, useModal } from '@mfe2/modal-component';
import './CustomModal.css';

function CustomModal() {
  const { isOpen, openModal, closeModal } = useModal();

  return (
    <>
      <button onClick={openModal}>Open Custom Modal</button>
      
      <Modal
        isOpen={isOpen}
        onClose={closeModal}
        title="Custom Styled Modal"
        className="custom-modal"
        overlayClassName="custom-overlay"
        closeOnOverlayClick={false}
      >
        <div className="custom-content">
          <p>This modal has custom styling and won't close when clicking outside.</p>
          <button onClick={closeModal}>Close</button>
        </div>
      </Modal>
    </>
  );
}

Form Modal

import { Modal, useModal } from '@mfe2/modal-component';

function FormModal() {
  const { isOpen, openModal, closeModal } = useModal();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission
    closeModal();
  };

  return (
    <>
      <button onClick={openModal}>Open Form</button>
      
      <Modal
        isOpen={isOpen}
        onClose={closeModal}
        title="Contact Form"
        size="medium"
      >
        <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor="name">Name:</label>
            <input type="text" id="name" required />
          </div>
          <div>
            <label htmlFor="email">Email:</label>
            <input type="email" id="email" required />
          </div>
          <div>
            <label htmlFor="message">Message:</label>
            <textarea id="message" rows={4} required />
          </div>
          <div>
            <button type="submit">Submit</button>
            <button type="button" onClick={closeModal}>Cancel</button>
          </div>
        </form>
      </Modal>
    </>
  );
}

Accessibility Features

• ARIA Attributes: Proper role, aria-modal, and aria-labelledby attributes
• Keyboard Navigation: Escape key to close, Tab key for focus management
• Focus Management: Automatic focus trapping within the modal
• Screen Reader Support: Proper semantic structure and announcements
• High Contrast Support: CSS media queries for high contrast mode
• Reduced Motion: Respects user's motion preferences

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Development

Prerequisites

• Node.js 16+
• npm or yarn

Setup

# Install dependencies
npm install

# Start development mode
npm run dev

# Build for production
npm run build

# Run tests
npm test

# Lint code
npm run lint

Publishing

# Build and publish to npm
npm publish

License

MIT License - see LICENSE file for details.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Support

For issues and questions, please open an issue on GitHub.