# keykeyjs

> 基于redux设计思想的web端键盘按键监听工具

Latest version **1.0.9** (published 2018-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install keykeyjs
pnpm add keykeyjs
yarn add keykeyjs
bun add keykeyjs
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2018-03-23 |
| First published | 2018-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 (+7 in 1 direct dependencies) |
| Install scripts | no |
| Author | zjhch123 |
| Maintainers | zjhch123 |
| Keywords | keykey, keyboard, keyboard-listen, emiya |

## Links

- npm: https://www.npmjs.com/package/keykeyjs
- npm.io page: https://npm.io/package/keykeyjs

## Dependencies (16)

- [eslint](https://npm.io/package/eslint.md) ^4.7.2
- [make-dir](https://npm.io/package/make-dir.md) ^1.0.0
- [brace-expansion](https://npm.io/package/brace-expansion.md) ^1.1.8
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.6.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^2.9.1
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.30.1
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^0.1.17
- [babel-helper-define-map](https://npm.io/package/babel-helper-define-map.md) ^6.26.0
- [babel-helper-call-delegate](https://npm.io/package/babel-helper-call-delegate.md) ^6.24.1
- [babel-helper-replace-supers](https://npm.io/package/babel-helper-replace-supers.md) ^6.24.1
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) ^3.0.0
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.23.0
- [babel-helper-get-function-arity](https://npm.io/package/babel-helper-get-function-arity.md) ^6.24.1
- [babel-plugin-add-module-exports](https://npm.io/package/babel-plugin-add-module-exports.md) ^0.2.1
- [babel-plugin-transform-strict-mode](https://npm.io/package/babel-plugin-transform-strict-mode.md) ^6.24.1
- [babel-helper-optimise-call-expression](https://npm.io/package/babel-helper-optimise-call-expression.md) ^6.24.1

## Recent versions

- 1.0.9 (latest) — 2018-03-23
- 1.0.8 — 2018-03-23
- 1.0.7 — 2018-03-23
- 1.0.6 — 2018-03-21
- 1.0.5 — 2018-03-21
- 1.0.4 — 2018-03-21
- 1.0.3 — 2018-03-21
- 1.0.2 — 2018-03-21
- 1.0.1 — 2018-03-21
- 1.0.0 — 2018-03-21

## README

![logo](https://raw.githubusercontent.com/zjhch123/Keykey.JS/master/docs/logo.png)

基于redux设计思想的web端键盘按键监听工具。

[live demo](http://139.129.132.196/show/keykeyjs/) - **请打开控制台**

## 设计思想
![design.png](https://raw.githubusercontent.com/zjhch123/Keykey.JS/master/docs/design.png)

## for Test & Dev & Build
```
npm i
npm run dev
npm run build
```

## for use
### install
```
npm i keykeyjs --save
```
or
```
<script src="https://statis.hduzplus.xyz/keykeyjs/index.js"></script>
```

### usage
```javascript
/*
1. define reducer
action: {
  type: '{key} +/-' // key - 按键, +/- - 按下 / 弹起,
  payload: Event    // 原生事件
}
*/
const reducers = (action) => {
  switch (action.type) {
    case 'ArrowLeft +': // 按下左方向键，事件会持续触发
      console.log('press ArrowLeft');
      break;
    case 'ArrowLeft -': // 弹起左方向键，事件在弹起时触发一次
      console.log('not press ArrowLeft');
      break;
    case 's +':
      console.log('stop listen 2s');
      keykeyjs.stopListen(2000); // keykeyjs提供了暂停监听函数
      break;
    case 'a +':
      console.log('stop listen until async finish');
      keykeyjs.stopListen((restart) => {  // 暂停监听函数的参数可以传入函数，函数中包含默认参数restart，调用restart之后会继续开始监听
        console.log('start async action')
        setTimeout(() => {
          console.log('finish!')
          restart()
        }, Math.random() * 3000)
      });
      break;
  }
}

/*
2. launch
*/
keykeyjs.launch({
  targetDOM: document, // 设置监听时焦点所在的dom
  reducers: [reducers], // 可以传入reducers数组,
  // reducer: reducer  // 也可以传入单一reducer
  preventDefaultKeys: ['ArrowRight'], // 当event.key的值等于'ArrowRight'时，会preventDefault
  //preventDefaultKeys: function() {} // 也可以传入函数, 返回值必须为数组
})
```

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