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

An easy-to-use keyboard event react component, Package size less than 3kb
https://github.com/yuanguandong/react-keyevent

awesome-reactjs event js key-value keyboard keyboard-events keyboard-listeners keyboard-shortcuts keyevent keys react tsx

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/yuanguandong/react-keyevent
• Owner: yuanguandong
• License: mit
• Created: 2021-07-07T14:10:50.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-05-05T10:27:57.000Z (about 3 years ago)
• Last Synced: 2025-03-28T09:02:20.191Z (3 months ago)
• Topics: awesome-reactjs, event, js, key-value, keyboard, keyboard-events, keyboard-listeners, keyboard-shortcuts, keyevent, keys, react, tsx
• Language: TypeScript
• Homepage: https://react-keyevent.netlify.app/
• Size: 3.04 MB
• Stars: 47
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Keyevent

[![npm version](https://badge.fury.io/js/react-keyevent.svg)](#) [![npm version](https://img.shields.io/badge/react-%3E16-green)](#)[![npm version](	https://img.shields.io/github/issues/yuanguandong/react-keyevent)](#) [![npm version](	https://img.shields.io/github/forks/yuanguandong/react-keyevent)](#) [![npm version](https://img.shields.io/github/license/yuanguandong/react-keyevent)](#) [![npm version](	https://img.shields.io/github/stars/yuanguandong/react-keyevent)](#)

### 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副本](https://user-images.githubusercontent.com/13197560/125153789-c44b4080-e188-11eb-829e-307a738ad92b.png)

### Repository

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

### Live demo

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

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

## Live code

[![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-keyevent-8ny11s?file=/src/App.tsx)

### Install

```bash

npm i react-keyevent -S

```

### How to use

```js

import React, { useState } from "react";

import Keyevent from "react-keyevent";

const TopSide = () => {

  const [count, setCount] = useState(0);

  const onAltT = () => {

    setCount(count + 1);

  };

  return (

    

      Click To Focusing

      


        Alt

        T

        {count}

      

    

  );

};

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