useKeyPress

一个优雅的管理 keyup 和 keydown 键盘事件的 Hook,支持键盘组合键,定义键盘事件的 key 和 keyCode 别名输入 。

Api 与ahooks一致。

代码演示

基础用法

组合方式

进阶使用

API

useKeyPress(
  keyFilter: KeyFilter,
  eventHandler: EventHandler = noop,
  options?: Options
)

参数

Tips: keyType 为键盘事件中的 key 和 keyCode

参数说明类型默认值
keyFilter支持键盘事件中的 key 和 keyCode,支持回调方式返回 boolean 判断,支持别名使用keyType | Array<keyType> | ((event: KeyboardEvent) => boolean)-
eventHandler事件回调函数(event: KeyboardEvent) => void() => {}
options可选配置项,见 Options--

Options

参数说明类型默认值
events触发事件Array<keydown | keyup>['keydown']
targetDOM 节点或者 Ref 对象(() => HTMLElement) | HTMLElement | React.MutableRefObject-

备注

1.全部的按键别名

enter
tab
delete (捕获“删除”和“退格”键)
esc
space
up
down
left
right

2.修饰键

ctrl;
alt;
shift;
meta;

最近更新: