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

Last update: May 5, 2022

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这个容器组件(点击)

GitHub

https://github.com/yuanguandong/react-keyevent
You might also like...

React-Scrollbar-Size is a React hook designed to calculate the size of the user agent's horizontal and vertical scrollbars.

React-Scrollbar-Size is a React hook designed to calculate the size of the user agent's horizontal and vertical scrollbars. It will also detect when the size of the scrollbars change, such as when the user agent's zoom factor changes.

Mar 3, 2022

A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.

react-native-keyboard-accessory A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard. Expo Snack Playground https:

May 13, 2022

The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector

The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector

The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector. Once our system is connected to the keyboard, the user can interactively learn, play or teach in combination with the web application that we provide.

Feb 7, 2022

Club-Event-Calendar-Webpage-Demo - Webpage Demo for Club Event Calendar

Club Event Calendar Webpage Demo Demo Repository for Club Event Calendar Webpage

Jan 9, 2022

Key-racing is a simple and easy-to-use keyboard trainer that help you master ten-finger typing skills

Key-racing is a simple and easy-to-use keyboard trainer that help you master ten-finger typing skills

Key-racing is a simple and easy-to-use keyboard trainer that help you master ten-finger typing skills

Dec 25, 2021

A small package for adding an event to a calendar.

@culturehq/add-to-calendar A small package for adding an event to a calendar. Getting started First, add @culturehq/add-to-calendar to your package.js

Feb 26, 2022

Tiny (2.3kB) React component for image lazy loading

Tiny (2.3kB) React component for image lazy loading

React Pics Tiny (2.3kB) React component for image lazy loading Demo Table of Contents React Pics Table of Contents Installation Usage Basic With a pla

Dec 26, 2021

React code splitting made easy. Reduce your bundle size without stress ✂️ ✨ .

React code splitting made easy. Reduce your bundle size without stress ✂️ ✨ .

React code splitting made easy. Reduce your bundle size without stress ✂️ ✨ . npm install @loadable/component Docs See the documentation at loadable-c

May 9, 2022

🥢 A minimalist-friendly ~1.3KB routing for React and Preact. Nothing else but HOOKS.

wouter is a tiny router for modern React and Preact apps that relies on Hooks. A router you wanted so bad in your project! Features Zero dependency, o

May 15, 2022

A tiny(around 1.3kb gzip) React library to generate colorful text placeholders 🎨

A tiny(around 1.3kb gzip) React library to generate colorful text placeholders 🎨

React Spectrum A tiny(around 1.3kb gzip) React library to generate colorful text placeholders 🎨 Inspired by this code illustration on CodeSandbox hom

Apr 10, 2022

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Fast 3kB alternative to React with the same modern API. All the power of Virtual DOM components, without the overhead: Familiar React API & patterns:

May 10, 2022

A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!

A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!

react-tiny-virtual-list A tiny but mighty list virtualization library, with zero dependencies 💪 Tiny & dependency free – Only 3kb gzipped Render mill

May 10, 2022

React hooks for easy event listener management.

React hooks for easy event listener management.

Feliz.UseListener This library exposes React hooks for adding event listeners while ensuring that the lifecycle and dependcies are all correctly manag

Aug 31, 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

Dec 3, 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

Dec 3, 2021

An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API

An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API

react-native-gif-search An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using

Mar 3, 2022

Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

May 16, 2022

Easier React Native upgrades by clearly exposing changes from a version to another. :rocket: And what better way than to purge, init, then diff? Spoiler: there's no better way. 😎

RN diff PURGE This repository exposes an untouched React Native app generated with the CLI npx @react-native-community/cli init RnDiffApp. Each new Re

May 4, 2022

MMKV - ⚡️ The fastest key/value storage for React Native. ~30x faster than AsyncStorage!

MMKV - ⚡️ The fastest key/value storage for React Native. ~30x faster than AsyncStorage!

MMKV is an efficient, small mobile key-value storage framework developed by WeChat. react-native-mmkv is a library that allows you to easily use MMKV inside your React Native applications. It provides fast and direct bindings to the native C++ library which are accessible through a simple JS API.

May 8, 2022
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

Apr 18, 2022
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

Feb 15, 2022
Niue is a tiny shared state and event library for React

Niue is a small library (~1.3kb before compression) that provides a simple way to manage your React app's shared state and send events between components.

Mar 26, 2022
React higher order component for adding onEnterKeyDown to input components

React higher order component for adding onEnterKeyDown to input components

May 4, 2020
Declarative hotkey and focus area management for React

React HotKeys A declarative library for handling hotkeys and focus areas in React applications. Upgrading from 1.*.* ? See the upgrade notes. Looking

May 7, 2022
Lightweight keydown wrapper for React components
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

May 7, 2022
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

Aug 27, 2021
🐭 React hook that tracks mouse events on selected element - zero dependencies
🐭  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

May 10, 2022
keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

Apr 1, 2022
Kontenbase: create backend API, auth, and storage in less than 1 minute without coding
Kontenbase: create backend API, auth, and storage in less than 1 minute without coding

No Code Backend API, Fast and Easy! Kontenbase allows you to easily create backe

May 2, 2022