ModalWrapper.js

import React from "react";
import { CSSTransition } from "react-transition-group";
import ModalPortal from "../ModalPortal";

export function useModal() {
    const [isModalVisible, setIsModalVisitble] = React.useState(false);
    const toggleModal = () => {
        setIsModalVisitble((prevState) => !prevState);
    };
    const closeModal = () => {
        setIsModalVisitble(false);
    };

    return { isModalVisible, toggleModal, closeModal };
}

function ModalWrapper({ children, isVisible, closeModal }) {
    const onKeyDown = (event) => {
        if (event.keyCode === 27) {
            if (closeModal) closeModal();
        }
    };

    React.useEffect(() => {
        document.addEventListener("keydown", onKeyDown, false);
        return () => {
            document.removeEventListener("keydown", onKeyDown, false);
        };
    }, []);

    return (
        <ModalPortal>
            <CSSTransition
                in={isVisible}
                timeout={200}
                classNames="modal-transition"
                unmountOnExit
            >
                {children}
            </CSSTransition>
        </ModalPortal>
    );
}

export default ModalWrapper;