An easy-to-use keyboard event react component

Can achieve a variety of custom keyboard functions, Package size less than`3kb`

非常容易使用的一个键盘事件监听react组件，可实现各种自定义快捷键功能

Click To Focusing

AltT0

CtrlL0

Meta(Win/Commond)R0

Global Keyevent - Press `Ctrl` + `B` to collapse LeftSide

Easy To Use

You can very easily integrate a certain panel to enable keyboard shortcuts, you can click here to view whole demo

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

events

Key like this: onCtrlM、onShiftU、onMetaT……

type { [key: string]: (e: KeyboardEvent) => void }

needFocusing

Events only take effect if you want to focus on a panel, Please use needFocusing

type boolean