# vue-keycon

> Vue 3 Key Controller Reactive Component

Latest version **0.2.0** (published 2022-12-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-keycon
pnpm add vue-keycon
yarn add vue-keycon
bun add vue-keycon
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2022-12-04 |
| First published | 2022-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 44 |
| Author | Daybrush |
| Maintainers | younkue |
| Keywords | key, keycode, keyboard, component, esm, vue, vue3, hooks |

## Links

- npm: https://www.npmjs.com/package/vue-keycon
- Repository: https://github.com/daybrush/keycon/blob/master/packages/vue-keycon
- Homepage: https://github.com/daybrush/keycon
- Issues: https://github.com/daybrush/keycon/issues
- npm.io page: https://npm.io/package/vue-keycon

## Dependencies (2)

- [keycon](https://npm.io/package/keycon.md) ~1.4.0
- [@cfcs/vue3](https://npm.io/package/@cfcs/vue3.md) ^0.0.6

## Recent versions

- 0.2.0 (latest) — 2022-12-04
- 0.1.2 — 2022-10-19
- 0.1.1 — 2022-09-24
- 0.1.0 — 2022-09-24

## README

# vue-keycon  [![npm version](https://badge.fury.io/js/vue-keycon.svg)](https://badge.fury.io/js/vue-keycon) 

Vue 3 Keyboard Controller

## Installation
```
npm i vue-keycon
```

## How to use

```vue
<template>
  <div>{{ isKeydown ? "keydown" : "keyup" }}</div>
</template>
<script>
import { useKeycon } from "vue-keycon";

export default {
  setup() {
    const {
      isKeydown,
      onBlur,
      onKeydown,
      onKeyup,
    } = useKeycon({
      // If you want to specify a specific input, use ref. If not used, the event is used for the window.
      ref: containerRef,
      keys: ["shift"],
    });

    onKeydown(() => {
      console.log("keydown");
    });

    onKeyup(() => {
      console.log("keyup");
    });

    onBlur(() => {
      console.log("blur");
    });

    return {
      isKeydown,
    };
  }
}


```

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