Custom (React Bootstrap 2) Modal

custom-modal.tsx

import { useStyleModules } from 'helpers/functions';
import { FC, useEffect, useLayoutEffect, useState } from 'react';
import { Modal } from 'react-bootstrap';
import ModalStyles from 'styles/modules/modal.module.sass';

type CustomModalProps = {
  show: boolean;
  title?: string;
  buttons?: JSX.Element[];
  onModalClose?: () => void;
}

const CustomModal: FC<CustomModalProps> = (props) => {

  const { show, title = String(), buttons = [], onModalClose, children } = props;

  const [currentShow, setCurrentShow] = useState<boolean>(show);

  const handleHide = () => {
    setCurrentShow(false);
  };

  useLayoutEffect(() => {
    setCurrentShow(show);
  }, [show]);

  useEffect(() => {
    if (!currentShow && onModalClose) {
      onModalClose();
    }
  }, [currentShow]);

  return (
    <Modal show={currentShow} className={useStyleModules(ModalStyles.customModal)} onHide={handleHide}>
      <Modal.Header className={useStyleModules(ModalStyles.customModalHeader)} closeButton>
        {title}
      </Modal.Header>
      <Modal.Body className={useStyleModules(ModalStyles.customModalBody)}>
        {children}
      </Modal.Body>
      {
        buttons?.length > 0
          ? <Modal.Footer className={useStyleModules(ModalStyles.customModalFooter)}>
            {
              buttons.map(button => button)
            }
          </Modal.Footer>
          : null
      }
    </Modal>
  );
};

export default CustomModal;

helpers_functions.ts

export const useStyleModules = (...classes: string[]): string => classes.join(' ');