31 - Modal Window for Alerts and Confirmations

Description

Create a reusable React component that displays modal windows for alerts and confirmations.

Features:

• Displays messages and optional buttons for actions.

• Overlays the main content to focus user attention.

• Can be triggered from various parts of the application.

• Handles user interactions (e.g., button clicks) to close the modal or confirm actions.

Constraints:

• Ensure accessibility for users with assistive technologies.

• Consider responsiveness for different screen sizes.

Puzzle Algorithm

1. Component Structure:

   • Define a functional component named ModalWindow.

   • Accept props for:

     • isOpen: Boolean to control modal visibility.

     • title: Text for the modal header (optional).

     • message: Content for the modal body.

     • buttons: Array of objects defining buttons (text and onClick handler).

   • Manage internal state for button clicks or other interactions.

2. JSX Rendering:

   • Render a container element (e.g., div) with appropriate styling for:

     • Modal overlay (to block background interaction).

     • Modal content (header, body, buttons).

   • Conditionally render the modal based on the isOpen prop.

3. Handling User Interactions:

   • Implement event handlers to close the modal or perform actions based on button clicks.

   • Update internal state or trigger callbacks as needed.

4. Accessibility:

   • Use ARIA attributes to describe the modal's role and structure for screen readers.

   • Ensure proper focus management when opening and closing the modal.

Code

import React, { useState } from 'react';

const ModalWindow = ({ isOpen, title, message, buttons, onClose }) => {
  const [confirmed, setConfirmed] = useState(false);

  const handleClose = () => {
    if (confirmed) {
      onClose(true); // Pass confirmation state if needed
    } else {
      onClose(false);
    }
    setConfirmed(false);
  };

  const handleButtonClick = (button) => {
    if (button.onClick) {
      button.onClick();
    }
    setConfirmed(button.confirm);
  };

  return (
    isOpen && (
      <div className="modal-overlay">
        <div className="modal-content">
          {title && <h2>{title}</h2>}
          <p>{message}</p>
          <div className="buttons">
            {buttons.map((button) => (
              <button key={button.text} onClick={() => handleButtonClick(button)}>
                {button.text}
              </button>
            ))}
          </div>
        </div>
      </div>
    )
  );
};

export default ModalWindow;

Explanation

1. Props:

   • isOpen: Determines whether the modal is displayed.

   • title: Optional header text for the modal.

   • message: Content displayed in the modal body.

   • buttons: Array of objects defining button properties (text and optional onClick handler).

   • onClose: Callback function triggered when the modal closes.

2. State Management:

   • confirmed: Tracks whether a confirmation button was clicked (optional, useful for confirmations).

3. Event Handling:

   • handleClose: Closes the modal and triggers the onClose callback with the confirmed state (if applicable).

   • handleButtonClick: Handles individual button clicks, executing the button's onClick handler and updating the confirmed state for confirmation buttons.

4. Conditional Rendering:

   • The modal only renders if the isOpen prop is true.

5. Accessibility:

   • ARIA attributes can be added to the modal and its elements for better screen reader support.

Additional Notes

• This code provides a basic structure for alerts and confirmations. You can customize it further to include features like styling, animations, and additional button types.

• Consider integrating the modal with a state management library for more complex workflows.