/
Elezzar
/
Stellar_Burger
Обзор
Документация
Войти
/
Elezzar
/
Stellar_Burger
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
src/components/Modal/Modal.tsx
41 строка
1 KB
Elezzar
Add TypeScript
04 мар 2024, 05:23
04 мар 2024, 05:23
62358c5
Код
Авторство
О чём код?
import { useEffect, ReactNode } from "react"; import { createPortal } from "react-dom"; import { CloseIcon } from '@ya.praktikum/react-developer-burger-ui-components' import modalStyle from './Modal.module.css' import ModalOverlay from "../ModalOverlay/ModalOverlay.tsx"; const modal: HTMLElement | null = document.querySelector('#modal') const Modal = ({children, closePopup} : { children: ReactNode, closePopup: () => void }) => { useEffect(() => { const closePopupOnEsc = (evt: KeyboardEvent) => { if(evt.key === 'Escape') { closePopup() } } document.addEventListener('keydown', closePopupOnEsc) return () => { document.removeEventListener('keydown', closePopupOnEsc) } }, [closePopup]) if (!modal) return null; return createPortal( <ModalOverlay closePopup={closePopup}> <div className={modalStyle.window} onClick={e => e.stopPropagation()}> <button className={modalStyle.close} onClick={closePopup}> <CloseIcon type="primary"/> </button> {children} </div> </ModalOverlay>, modal ); } export default Modal;