非常容易使用的一个键盘事件监听 react 组件,可实现各种自定义快捷键功能,只有不到 3kb
https://github.com/yuanguandong/react-keyevent
https://react-keyevent.netlify.app/
https://yuanguandong.github.io/react-keyevent/
npm i react-keyevent -S
import React, { useState } from "react";
import Keyevent from "react-keyevent";
const TopSide = () => {
const [count, setCount] = useState(0);
const onAltT = () => {
setCount(count + 1);
};
return (
<Keyevent
className="TopSide"
events={{
onAltT,
}}
needFocusing
>
<span className="tip">Click To Focusing</span>
<div className="group">
<span className="key">Alt</span>
<span className="key">T</span>
<span className="count">{count}</span>
</div>
</Keyevent>
);
};
export default TopSide
property | required | type | defaultValue | description |
---|---|---|---|---|
events | true | { [key: string]: (e: KeyboardEvent) => void } | null | The binding keyboard events 绑定的键盘事件 |
needFocusing | false | boolean | false | 是否需要聚焦,若值为 true,则需要聚焦 Focus 这个容器组件(点击) |
感兴趣的先点个 star 收藏起吧,说不定那天就会用到了!
1
40EaE5uJO3Xt1VVa 2021-08-29 18:38:43 +08:00
我是第九个 star 的
|
2
tousfun 2021-08-29 20:31:16 +08:00 via iPhone
已 star 老哥这个宣传页用什么做的,还挺好看的
|
4
favori OP @yanzhiling2001 谢谢!谢谢老哥
|