https://github.com/varld/litkey

🔥⌨️ Enjoyable keyboard shortcuts (with support for React)
https://github.com/varld/litkey

dom hacktoberfest hotkeys keyboard productivity react shortcut

Last synced: 2 months ago
JSON representation

🔥⌨️ Enjoyable keyboard shortcuts (with support for React)

• Host: GitHub
• URL: https://github.com/varld/litkey
• Owner: varld
• License: mit
• Created: 2020-06-09T13:30:31.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T08:25:11.000Z (about 2 years ago)
• Last Synced: 2024-08-10T23:12:10.815Z (6 months ago)
• Topics: dom, hacktoberfest, hotkeys, keyboard, productivity, react, shortcut
• Language: TypeScript
• Homepage:
• Size: 1.34 MB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Litkey


🔥 Litkey makes keyboard shortcuts simple and enjoyable.


## Install

```bash

# Using npm

npm install litkey

# Using yarn

yarn add litkey

```

## Usage

```typescript

import litkey from 'litkey';

// Add a global keyboard shortcut

litkey('mod+k', () => {

  // do something

});

// Add a keyboard shortcut to a specific element

litkey('mod+k', () => {

  // do something

}, myElement);

```

## Usage with React

```tsx

import { useShortcut } from 'litkey';

let Component = () => {

  let [clicked, setClicked] = useState(false);

  useShortcut('mod+a', () => {

    setClicked(true);

  });

  // You can also specify hook dependencies which will 

  // get passed on to the underlying useEffect

  useShortcut('mod+k', () => {

    setClicked(true);

  }, [/* react hook dependency list */]);

  // Using the fourth parameter, you can specify a

  // specific DOM element, in which the keyboard 

  // shortcut will be fired

  useShortcut('mod+k', () => {

    setClicked(true);

  }, [], myElement);

  return (

    
{ clicked ? 'clicked' : 'not clicked' }

  );

};

```


## API

### `litkey(shortcut, handler, [context])`

The `litkey` function is the default export of litkey.

#### `shortcut: string | string[]`

`shortcut` is a `string` or an `array of strings`, which specify the key combinations which will fire the callback.

#### `handler: (event: KeyboardEvent) => any`

The `handler` is a callback function which will be called if the keyboard shortcut is pressed. 

It receives the `KeyboardEvent` as its first parameter.

#### `context?: HTMLElement`

The context is optional and can be used to specify the `HTMLElement`, in which litkey will listen for keyboard shortcuts.

### `useShortcut(shortcut, handler, [dependencies, [context]])`

#### `shortcut: string | string[]`

`shortcut` is a `string` or an `array of strings`, which specify the key combinations which will fire the callback.

#### `handler: (event: KeyboardEvent) => any`

The `handler` is a callback function which will be called if the keyboard shortcut is pressed. 

It receives the `KeyboardEvent` as its first parameter.

#### `dependencies: any[]`

`dependencies` is an optional array, which will be passed on directly to `useEffect` to serve as React hook dependencies.

#### `context?: HTMLElement`

`context` is optional and can be used to specify the `HTMLElement`, in which litkey will listen for keyboard shortcuts.

## License

MIT © [Tobias Herber](https://herber.space)