React Keyevent

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

Very easy to use a keyboard event to listen to the React component, can achieve a variety of custom key shortcuts, only less than 3KB

Repository

Github.com/yuanguandon…

Live demo

react-keyevent.netlify.app/

Yuanguandong. Making. IO/react – keyev…

Install

npm i react-keyevent -S
Copy the code

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
Copy the code

Props

property required type defaultValue description
events true { [key: string]: (e: KeyboardEvent) => void } null The Binding Keyboard Events Specifies The binding keyboard events
needFocusing false boolean false Whether to Focus, if true, Focus the container component (click)