Add hook to close modal

Author: jacobtyq

src/components/SnippetModal.tsx

@@ -1,30 +1,32 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import Button from "./Button";
-import { CloseIcon } from "./Icons";
-import CodePreview from "./CodePreview";
-import { SnippetType } from "../types";
-import slugify from "../utils/slugify";
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Button from './Button'
+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;
-  language: string;
-  handleCloseModal: () => void;
-};
+  snippet: SnippetType
+  language: string
+  handleCloseModal: () => void
+}
 
 const SnippetModal: React.FC<Props> = ({
   snippet,
   language,
   handleCloseModal,
 }) => {
-  const modalRoot = document.getElementById("modal-root");
-  if (!modalRoot) return null;
+  const modalRoot = document.getElementById('modal-root')
+  if (!modalRoot) return null
+  useEscapeKey(handleCloseModal)
 
   return ReactDOM.createPortal(
-    <div className="modal-overlay">
-      <div className="modal | flow" data-flow-space="lg">
-        <div className="modal__header">
-          <h2 className="section-title">{snippet.title}</h2>
+    <div className='modal-overlay'>
+      <div className='modal | flow' data-flow-space='lg'>
+        <div className='modal__header'>
+          <h2 className='section-title'>{snippet.title}</h2>
           <Button isIcon={true} onClick={handleCloseModal}>
             <CloseIcon />
           </Button>
@@ -35,27 +37,27 @@ const SnippetModal: React.FC<Props> = ({
           {snippet.description}
         </p>
         <p>
-          Contributed by{" "}
+          Contributed by{' '}
           <a
             href={`https://github.com/${snippet.author}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="styled-link"
+            target='_blank'
+            rel='noopener noreferrer'
+            className='styled-link'
           >
             @{snippet.author}
           </a>
         </p>
-        <ul role="list" className="modal__tags">
+        <ul role='list' className='modal__tags'>
           {snippet.tags.map((tag) => (
-            <li key={tag} className="modal__tag">
+            <li key={tag} className='modal__tag'>
               {tag}
             </li>
           ))}
         </ul>
       </div>
     </div>,
     modalRoot
-  );
-};
+  )
+}
 
-export default SnippetModal;
+export default SnippetModal

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