The Node.js® Website
keii.dev
1import { useEffect } from 'react';
2
3type KeyboardCommand = 'cmd-k' | 'escape' | 'down' | 'up' | 'enter';
4
5type KeyboardCommandCallback = (key: KeyboardCommand) => void;
6
7const useKeyboardCommands = (fn: KeyboardCommandCallback) => {
8 useEffect(() => {
9 document.addEventListener('keydown', event => {
10 // Detect ⌘ + k on Mac, Ctrl + k on Windows
11 if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
12 event.preventDefault();
13 fn('cmd-k');
14 }
15
16 switch (event.key) {
17 case 'Escape':
18 fn('escape');
19 break;
20 case 'Enter':
21 fn('enter');
22 break;
23 case 'ArrowDown':
24 fn('down');
25 break;
26 case 'ArrowUp':
27 fn('up');
28 break;
29 }
30 });
31
32 return () => document.removeEventListener('keydown', () => {});
33 }, [fn]);
34};
35
36export default useKeyboardCommands;