Add support for keyboard events

app/src/effects/useGlobalKeyEventHandler.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import { KeyCodes } from '../utils/KeyCodes'
+
+export function useGlobalKeyEventHandler(
+  key: KeyCodes | undefined,
+  callback: (event: KeyboardEvent) => void,
+  dependencies?: Array<any>
+) {
+  useEffect(() => {
+    function handleKeyEvent(event: KeyboardEvent) {
+      if (key === undefined) {
+        callback(event)
+      } else if (event.keyCode === key) {
+        callback(event)
+        event.preventDefault()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyEvent, false)
+    return function cleanup() {
+      document.removeEventListener('keydown', handleKeyEvent, false)
+    }
+  }, dependencies)
+}

app/src/effects/useKeyEventHandler.tsx

@@ -0,0 +1,31 @@
+import { KeyCodes } from '../utils/KeyCodes'
+import { useCallback } from 'react'
+
+export function useKeyEventHandler(key: KeyCodes, callback: () => void, dependencies: Array<any> = []) {
+  return useKeyEventHandlers([{ key, callback }], dependencies)
+}
+
+export function useKeyEventHandlers(
+  actions: Array<{
+    key: KeyCodes
+    callback: (event: KeyboardEvent) => void
+    preventDefault?: boolean
+    stopPropagation?: boolean
+  }>,
+  dependencies: Array<any> = []
+) {
+  return useCallback(() => {
+    return function handleKeyEvent(event: KeyboardEvent) {
+      const action = actions.find(a => a.key === event.keyCode)
+      if (action) {
+        action.callback(event)
+        if (action.preventDefault !== false) {
+          event.preventDefault()
+        }
+        if (action.stopPropagation !== false) {
+          event.stopPropagation()
+        }
+      }
+    }
+  }, dependencies)
+}