text: import React, { useEffect } from "react";
  import ReactDOM from "react-dom";
  import { CSSTransition } from "react-transition-group";
  import "./Modal.css";
  
  export const Modal = props => {
  
    useEffect(() => {
      const closeOnEscapeKeyDown = e => {
          if ((e.charCode || e.keyCode) === 27) {
            props.onClose();
          }
        };
      document.body.addEventListener("keydown", closeOnEscapeKeyDown);
      return function cleanup() {
        document.body.removeEventListener("keydown", closeOnEscapeKeyDown);
      };
    }, [props]);
    const nodeRef = React.useRef(null)
  
    return ReactDOM.createPortal(
      <CSSTransition
        nodeRef={nodeRef}
        in={props.show}
        unmountOnExit
        timeout={{ enter: 0, exit: 300 }}
      >
        <div className="modal" onClick={props.onClose} ref={nodeRef}>
          <div className="modal-content" onClick={e => e.stopPropagation()}>
            <div className="modal-header">
              <h4 className="modal-title">{props.title}</h4>
            </div>
            <div className="modal-body">{props.children}</div>
            <div className="modal-footer">
              <button onClick={props.onClose} className="button">
                Close
              </button>
            </div>
          </div>
        </div>
       </CSSTransition>
      , document.getElementById("root")
    );
  };
  