Merge pull request #2 from jacobtyq/main

Use Escape key to close snippet modal

Author: technoph1le

src/components/SnippetModal.tsx

@@ -5,6 +5,7 @@ import { CloseIcon } from "./Icons";
 import CodePreview from "./CodePreview";
 import { SnippetType } from "../types";
 import slugify from "../utils/slugify";
+import useEscapeKey from "../hooks/useEscapeKey";
 
 type Props = {
   snippet: SnippetType;
@@ -19,6 +20,7 @@ const SnippetModal: React.FC<Props> = ({
 }) => {
   const modalRoot = document.getElementById("modal-root");
   if (!modalRoot) return null;
+  useEscapeKey(handleCloseModal);
 
   return ReactDOM.createPortal(
     <div className="modal-overlay">

src/hooks/useEscapeKey.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react"
+
+const useEscapeKey = (onEscapeEvent: () => void) => {
+  useEffect(() => {
+    const handleEscape = (event: { key: string }) => {
+      if (event.key === "Escape") onEscapeEvent();
+    }
+    window.addEventListener("keydown", handleEscape);
+
+    return () => {
+      window.removeEventListener("keydown", handleEscape);
+    }
+  }, [onEscapeEvent]);
+};
+
+export default useEscapeKey;