An easy-to-use keyboard event react component, Package size less than 3kb

Overview

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副本

Info

Live demo

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

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

Install

npm i react-keyevent -S

How to use

{ const [count, setCount] = useState(0); const onAltT = () => { setCount(count + 1); }; return ( Click To Focusing
Alt T {count}
); }; export default TopSide ">
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这个容器组件(点击)
Releases(1.0.0)
Owner
Favori
重剑无锋,大巧不工
Favori
React component to handle keyboard events :key:

react-key-handler ?? React component to handle keyboard events (such as keyup, keydown & keypress). Testimonials “Happy to see that react-key-handler

Ayrton De Craene 386 Jul 17, 2021
Lightweight keydown wrapper for React components

Use react-keydown as a higher-order component or decorator to pass keydown events to the wrapped component, or call methods directly via designated ke

Jed Verity 497 Aug 23, 2021
Manage keyboard shortcuts from one place

React Shortcuts Manage keyboard shortcuts from one place. Intro Managing keyboard shortcuts can sometimes get messy. Or always, if not implemented the

Avocode 307 Sep 17, 2021
🐭 React hook that tracks mouse events on selected element - zero dependencies

React Mighty Mouse React hook that tracks mouse events on selected element. Demo Demos created with React DemoTab ?? Install npm install react-hook-mi

mkosir 85 Sep 6, 2021
Makes listening to key press event easy.

use-key-capture ⌨️ A custom hook to ease the key-press listeners of a target/global. Check the demo here The problem Listening for key-press might be

Pranesh 15 Mar 27, 2021
Determine the cursor aim for triggering mouse events.

React Aim Determine the cursor aim for triggering mouse events. Demo Try the demo here. Installation npm install react-aim --save Usage import React,

Gabriel Bull 367 Aug 1, 2021
A set of components that react to page scrolling

react-scroll-components A set of components and mixins that react to page scrolling ScrollListenerMixin This mixin provides the following states: scro

Jeroen Coumans 120 Aug 27, 2021