Skip to content

Modal

Jump to bottom
Dan edited this page Jan 10, 2024 · 1 revision

React Modal Component Documentation

Overview

The Modal component provides a flexible and customizable modal dialog box for React applications. It is designed to be easy to use and integrate, with support for custom titles, icons, styles, and content.

Installation

To use the Modal component in your project, first import it:

const { Modal } = window.$_gooee.framework;

Usage

The Modal component can be used to display a modal dialog with customizable content, title, and icon. It also includes a close button for dismissing the modal.

Props

The Modal component accepts the following props:

  • children: The content to be displayed inside the modal body.
  • style: CSS styles to apply to the modal.
  • onClose: Function to be called when the modal is closed.
  • title: Text or component to be used as the modal's title.
  • icon: An optional icon to display in the modal header.

Modal Structure

The modal consists of the following elements:

  • modal-header: Contains the title, icon, and close button.
  • modal-title: Displays the title of the modal.
  • modal-body: The main content area of the modal.
  • close: A button to close the modal.

Styling

The component uses standard CSS classes like modal, modal-dialog, modal-content, modal-header, and modal-body. These can be styled or overridden as needed.

Integration with $_gooee.framework

The component utilizes the Button component from window.$_gooee.framework for the close button, demonstrating integration with external frameworks or libraries.

Accessibility

This modal component follows basic accessibility guidelines. Ensure that it meets all accessibility requirements for your specific use case, including keyboard navigability and screen reader support.

Browser Support

The Modal component is compatible with all modern web browsers, including Chrome, Firefox, Safari, and Edge.

Examples

Basic Modal

<Modal title="Modal Title" onClose={handleClose}>
    <p>Your modal content here</p>
</Modal>

Modal with Icon

<Modal title="Modal Title" icon={<YourIcon />} onClose={handleClose}>
    <p>Your modal content here</p>
</Modal>

Custom Styled Modal

<Modal title="Modal Title" style={{ backgroundColor: 'lightblue' }} onClose={handleClose}>
    <p>Your modal content here</p>
</Modal>

Contributing

Contributions to enhance the Modal component are welcomed. Follow the project's contribution guidelines for submitting bug fixes, feature requests, or enhancements.

Clone this wiki locally