/use-hotkeys

➷ Hotkeys React Hook

Primary LanguageTypeScript

Use Hotkeys

npm npm NpmLicense

React wrapper around Hotkeys.js.

╭┈┈╮          ╭┈┈╮  ╭┈┈╮
┆  ├┈┈..┈┈┈┈┈.┆  └┈╮┆  ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.
┆     ┆┆  □  ┆┆   ┈┤┆    < ┆  -__┘┆  ┆  ┆┆__ ┈┈┤
╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈  ┆╰┈┈┈┈┈╯
                                  ╰┈┈┈┈┈╯

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

Read about Hooks feature.

Installation

Note: React 16.8+ is required for Hooks.

With npm

npm i use-hotkeys

Or with yarn

yarn add use-hotkeys

Usage

Edit 1llx4n8q4

import useHotkeys from 'use-hotkeys';
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 <div>{count}</div>;
};