Add keyboard navigation component

1 files changed, 27 insertions, 0 deletions

diff --git a/gui/src/renderer/components/KeyboardNavigation.tsx b/gui/src/renderer/components/KeyboardNavigation.tsx
new file mode 100644
index 0000000000..3aefd7c684
--- /dev/null
+++ b/gui/src/renderer/components/KeyboardNavigation.tsx
@@ -0,0 +1,27 @@
+import React, { useCallback, useEffect } from 'react';
+import { useHistory } from 'react-router';
+import History from '../lib/history';
+
+interface IKeyboardNavigationProps {
+  children: React.ReactElement;
+}
+
+export default function KeyboardNavigation(props: IKeyboardNavigationProps) {
+  const history = useHistory() as History;
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        history.reset();
+      }
+    },
+    [history.reset],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  return props.children;
+}