https://github.com/sandiiarov/use-hotkeys

➷ Hotkeys React Hook
https://github.com/sandiiarov/use-hotkeys

Last synced: about 1 month ago
JSON representation

➷ Hotkeys React Hook

• Host: GitHub
• URL: https://github.com/sandiiarov/use-hotkeys
• Owner: sandiiarov
• Archived: true
• Created: 2019-02-22T05:33:43.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-12-11T02:13:53.000Z (about 4 years ago)
• Last Synced: 2024-07-31T07:15:47.262Z (4 months ago)
• Language: TypeScript
• Homepage:
• Size: 419 KB
• Stars: 18
• Watchers: 1
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-hotkeys`
• awesome-react-hooks-cn - `use-hotkeys`
• awesome-react-hooks - `use-hotkeys`
• awesome-react-hooks - `use-hotkeys`

README

        
# Use Hotkeys

![npm](https://img.shields.io/npm/dt/use-hotkeys.svg)

![npm](https://img.shields.io/npm/v/use-hotkeys.svg)

![NpmLicense](https://img.shields.io/npm/l/use-hotkeys.svg)

React wrapper around [Hotkeys.js](https://github.com/jaywcjlove/hotkeys).

```shell

╭┈┈╮          ╭┈┈╮  ╭┈┈╮

┆  ├┈┈..┈┈┈┈┈.┆  └┈╮┆  ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.

┆     ┆┆  □  ┆┆   ┈┤┆    < ┆  -__┘┆  ┆  ┆┆__ ┈┈┤

╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈  ┆╰┈┈┈┈┈╯

                                  ╰┈┈┈┈┈╯

```

**Use Hotkeys** - React hook that listen to keyboard events, defining and dispatching keyboard shortcuts.

Read about [Hooks](https://reactjs.org/docs/hooks-intro.html) feature.

## Installation

> Note: React 16.8+ is required for Hooks.

### With npm

```sh

npm i use-hotkeys

```

### Or with yarn

```sh

yarn add use-hotkeys

```

## Usage

[![Edit 1llx4n8q4](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/1llx4n8q4?fontsize=14)

```jsx

import useHotkeys from 'use-hotkeys';

```

```jsx

const Counter = () => {

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

  useHotkeys(

    (key, event, handle) => {

      switch (key) {

        case 'up':

          return setCount(count + 1);

        case 'down':

          return setCount(count - 1);

        default:

          return setCount(count);

      }

    },

    ['up', 'down'],

    [count]

  );

  return 
{count}
;

};

```