keydown abstracted to useKeydown

src/components/ModalView.vue

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

src/composition/useKeydown.js

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