使用Hotkeys.js 监听快捷键键盘 react

安装

yarn add hotkeys-js

项目地址以及api

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

使用监听

 useEffect(() => {
    hotkeys('ctrl+alt+a,ctrl+alt+b,ctrl+alt+c,ctrl+alt+d', function (event, handler) {
      console.log(handler.key)
      switch (handler.key) {
        case 'ctrl+alt+a':
          console.log('you pressed ctrl+alt+a')
          break
        case 'ctrl+alt+b':
          console.log('you pressed ctrl+alt+b!')
          break
        case 'ctrl+alt+c':
          console.log('you pressed ctrl+alt+c!')
          break
        case 'ctrl+alt+d':
          console.log('you pressed ctrl+alt+d!')
          break
        default:
          break
      }
    })
  }, [])
    

支持的键

HotKeys 理解以下修饰符：`⇧`, `shift`, `option`, `⌥`, `alt`, `ctrl`, `control`, `command`, 和`⌘`。

以下特殊键可用于快捷键：退格、制表符、清除、输入、返回、esc、转义、空格、向上、向下、向左、向右、主页、结束、翻页、向下翻页、删除、删除和 f1 到 f19。

`⌘`Command()\
`⌃`Control\
`⌥`Option(alt)\
`⇧`Shift\
`⇪`Caps Lock(Capital)\
~~`fn` 不支持 fn~~\
`↩︎` 返回/输入空格