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

[favori]

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 收藏起吧，说不定那天就会用到了！

[40EaE5uJO3Xt1VVa]

我是第九个 star 的

[tousfun]

已 star 老哥这个宣传页用什么做的，还挺好看的

[favori]

@919615766 自己做的，感谢喜欢😍，感兴趣可以 fork 一下，代码就在 example 里，写的比较潦草

[favori]

@yanzhiling2001 谢谢！谢谢老哥