项目作者: yuanguandong

项目描述 :
An easy-to-use keyboard event react component, Package size less than 3kb
高级语言: TypeScript
项目地址: git://github.com/yuanguandong/react-keyevent.git
创建时间: 2021-07-07T14:10:50Z
项目社区:https://github.com/yuanguandong/react-keyevent

开源协议:

下载


React Keyevent

npm version npm versionnpm version npm version npm version npm version

An easy-to-use keyboard event react component, Can achieve a variety of custom keyboard functions, Package size less than 3kb

非常容易使用的一个键盘事件监听react组件,可实现各种自定义快捷键功能,只有不到3kb

repository-open-graph-template副本

Repository

https://github.com/yuanguandong/react-keyevent

Live demo

https://react-keyevent.netlify.app/

https://yuanguandong.github.io/react-keyevent/

Live code

Install

  1. npm i react-keyevent -S

How to use

  1. import React, { useState } from "react";
  2. import Keyevent from "react-keyevent";
  3. const TopSide = () => {
  4. const [count, setCount] = useState(0);
  5. const onAltT = () => {
  6. setCount(count + 1);
  7. };
  8. return (
  9. <Keyevent
  10. className="TopSide"
  11. events={{
  12. onAltT,
  13. }}
  14. needFocusing
  15. >
  16. <span className="tip">Click To Focusing</span>
  17. <div className="group">
  18. <span className="key">Alt</span>
  19. <span className="key">T</span>
  20. <span className="count">{count}</span>
  21. </div>
  22. </Keyevent>
  23. );
  24. };
  25. 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这个容器组件(点击)