​
Overview

The Modal feature in this ReactJS template provides a flexible and customizable way to manage modals within your application. It uses MobX for state management and is designed to handle different types of modals with varying sizes and custom data. The core of this feature is the ModalStore, which tracks the current modal’s type, size, and any custom data associated with it. This documentation outlines how to use, modify, and expand the modal functionality.

​
Usage

​
Basic Implementation

To use the modal feature in your application, follow these steps:
  1. Import and Initialize ModalStore: Import ModalStore from modal.store and instantiate it in your component.
  2. Open and Close Modals: Use openModal and closeModal methods from ModalStore to manage modal visibility.
  3. Customize Modal Content: Implement custom modal components and include them in the getComponentForPath method in MainModal.

​
Example

import React from 'react';
import { ModalStore, ModalType, ModalSize } from './modal.store';
import MainModal from './MainModal';

const App = () => {
  const modalStore = new ModalStore();

  // Open a small confirm modal
  const openConfirmModal = () => {
    modalStore.openModal(ModalType.CONFIRM_MODAL, ModalSize.SMALL, {
      title: "Confirm Action",
      description: "Are you sure you want to proceed?",
      onConfirm: () => console.log("Confirmed"),
      confirmLabel: "Yes",
      onCancel: () => console.log("Cancelled"),
      cancelLabel: "No",
    });
  };

  return (
    <div>
      <button onClick={openConfirmModal}>Open Confirm Modal</button>
      <MainModal modalStore={modalStore} />
    </div>
  );
};

export default App;

​
Extending and Customizing Modals

​
Adding New Modal Types

To add a new custom modal type, follow these steps:
  1. Define a New Modal Type: Update the ModalType enum in modal.store.js by adding a new type for your custom modal.
  2. Create a Custom Modal Component: Implement a React component for your custom modal, ensuring it aligns with your design and functionality requirements.
  3. Integrate the New Modal: Modify the getComponentForPath method in MainModal to include your new modal type.

​
Example

​
Define a New Modal Type

Add a new type in ModalType enum: 
export enum ModalType {
  // ... existing types
  CUSTOM_MODAL = "CUSTOM_MODAL",
}

​
Create a Custom Modal Component

Here’s an example of a custom modal component, including a header: 
import React from 'react';
import ModalHeader from '../modal.header.component/modal.header.component';
import Column from '../../layout.components/column.component/column.component';

const CustomModal = ({ modalStore }) => {
  return (
    <Column>
      <ModalHeader title="Custom Modal" description="This is a custom modal.">
        {/* Modal content goes here */}
        <p>This is an example of custom content in a modal.</p>
        {/* Additional components and logic */}
      </ModalHeader>
    </Column>
  );
};

export default CustomModal;

​
Integrate the New Modal

Update MainModal to handle the new modal type: 
const getComponentForPath = (): JSX.Element => {
  switch (modalStore?.currentModal) {
    // ... existing cases
    case ModalType.CUSTOM_MODAL:
      return <CustomModal modalStore={modalStore} />;
    default:
      return <></>;
  }
};