# react-keyevent

> An easy-to-use keyboard event react component, Package size less than 3kb. 非常容易使用的一个键盘事件监听组件，可实现各种自定义快捷键功能，只有不到3kb

Latest version **1.1.0** (published 2022-05-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-keyevent
pnpm add react-keyevent
yarn add react-keyevent
bun add react-keyevent
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-05-05 |
| First published | 2021-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 47 |
| Author | yuanguandong |
| Maintainers | favori |
| Keywords | react, keyboard, javascript, tsx, key-value, event, keyboard-listeners, keyboard-shortcuts, keyboard-events, keys, keyevent, 键盘事件监听, 快捷键 |

## Links

- npm: https://www.npmjs.com/package/react-keyevent
- Repository: https://github.com/yuanguandong/react-keyevent
- Homepage: https://yuanguandong.github.io/react-keyevent/
- Issues: https://github.com/yuanguandong/react-keyevent/issues
- npm.io page: https://npm.io/package/react-keyevent

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2022-05-05
- 1.0.9 — 2021-08-13
- 1.0.8 — 2021-08-13
- 1.0.7 — 2021-07-09
- 1.0.6 — 2021-07-09
- 1.0.5 — 2021-07-09
- 1.0.4 — 2021-07-08
- 1.0.3 — 2021-07-07
- 1.0.2 — 2021-07-07
- 1.0.1 — 2021-07-07
- 1.0.0 — 2021-07-07
- 0.0.1 — 2021-07-06

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

---
_Source: https://npm.io/package/react-keyevent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._