React Keyevent 非常容易使用的一个键盘事件监听 react 组件，可实现各种自定义快捷键功能，只有不到 3kb
favori 2021-08-29 16:42:58 +08:00 1794 次点击这是一个创建于 1587 天前的主题，其中的信息可能已经有所发展或是发生改变。
React Keyevent
An easy-to-use keyboard event react component, Can achieve a variety of custom keyboard functions, Package size less than 3kb
非常容易使用的一个键盘事件监听 react 组件，可实现各种自定义快捷键功能，只有不到 3kb
Repository
https://github.com/yuanguandong/react-keyevent
Live demo
https://react-keyevent.netlify.app/
https://yuanguandong.github.io/react-keyevent/
Install
npm i react-keyevent -S How to use
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 Props
| 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 OP @yanzhiling2001 谢谢！谢谢老哥 |
Select Language