react-hotkeys-hook

  1. pnpm add react-hotkeys-hook
  3. import { useHotkeys } from 'react-hotkeys-hook'
  5. export const App = () => {
  6.   const [count, setCount] = useState(0)
  7.   useHotkeys('ctrl+k', () => setCount(count + 1), [count])
  9.   return (
  10.     <p>
  11.       Pressed {count} times.
  12.     </p>
  13.   )
  14. }

hotkeys-js

https://github.com/jaywcjlove/hotkeys-js
https://wangchujiang.com/hotkeys-js/

  1. pnpm add hotkeys-js
  3. <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
  5. import hotkeys from 'hotkeys-js';
  7. hotkeys('f5', function(event, handler){
  8.   // Prevent the default refresh event under WINDOWS system
  9.   event.preventDefault()
  10.   alert('you pressed F5!')
  11. });
  13. hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){
  14.   switch (handler.key) {
  15.     case 'ctrl+a': alert('you pressed ctrl+a!');
  16.       break;
  17.     case 'ctrl+b': alert('you pressed ctrl+b!');
  18.       break;
  19.     case 'r': alert('you pressed r!');
  20.       break;
  21.     case 'f': alert('you pressed f!');
  22.       break;
  23.     default: alert(event);
  24.   }
  25. });

image.png

快捷键案例

image.png