Abstract to useKeydown composition API

src/components/ModalView.vue

@@ -8,21 +8,11 @@
 </template>
 
 <script>
-  import { onBeforeUnmount } from 'vue';
+  import { useKeydown } from '../composition/useKeydown';
 
   export default {
     setup({closeModal}){
-      let onKeydown = (event) => {
+      useKeydown({key: 'Escape', fn: closeModal})
-        if(event.key == 'Escape') {
-          closeModal()
-        }
-      }
-
-      window.addEventListener('keydown', onKeydown)
-
-      onBeforeUnmount(() => {
-        window.removeEventListener('keydown', onKeydown)
-      })
     },
     props: {
       closeModal: {

src/composition/useKeydown.js

@@ -0,0 +1,17 @@
+import { onBeforeUnmount } from 'vue';
+
+export const useKeydown = function(keyCombo) {
+  let onkey = function(event) {
+    if(keyCombo.key == event.key) {
+      keyCombo.fn()
+    }
+  }
+
+  window.addEventListener('keydown', onkey);
+
+  onBeforeUnmount(()=> {
+    window.removeEventListener('keydown', onkey);
+  })
+}
+
+export default useKeydown;