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) |