import type { FC, MouseEvent } from "react"; import { useState, useEffect } from "react"; import usePortal from "react-cool-portal"; import GitHubCorner from "../GitHubCorner"; import styles from "./styles.module.scss"; const App: FC = () => { const [isFadeOut, setIsFadeOut] = useState(false); const { Portal, show, hide, isShow } = usePortal({ defaultShow: false, escToHide: false, }); const close = () => { setIsFadeOut(true); }; const handleClickBackdrop = (e: MouseEvent) => { const { id } = e.target as HTMLDivElement; if (id === "modal" || id === "modal-dialog") close(); }; const handleAnimEnd = () => { if (!isFadeOut) return; setIsFadeOut(false); hide(); }; useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (isShow && e.key === "Escape") close(); }; document.addEventListener("keydown", handleKeyDown); return () => { document.removeEventListener("keydown", handleKeyDown); }; }, [isShow]); return (

REACT COOL PORTAL

{ "React hook for Portals, which renders modals, dropdowns, tooltips etc. to or else." }

); }; export default App;