@vulcancreative/keyboard-event-bus

Keyboard Event Bus

A lightweight package for handling keyboard events and triggering user-defined actions in React applications

Demo

https://vulcancreative.github.io/keyboard-event-bus/

Instalation

npm install @vulcancreative/keyboard-event-bus

or

yarn add @vulcancreative/keyboard-event-bus

How to use

Wrap your React app with KeyboardEventBusProvider

import {KeyboardEventBusProvider} from "@vulcancreative/keyboard-event-bus";

<KeyboardEventBusProvider>
  <App />
</KeyboardEventBusProvider>

Inside your React app, use the useKeyboardEventBus hook to add new shortcut.

import { useKeyboardEventBus, Key } from "@vulcancreative/keyboard-event-bus";

const App = () => {
  const shortcut = useKeyboardEventBus();

  useEffect(() => {
    const removeShortcut = shortcut?.add([Key.CMD_CTRL, Key.SHIFT, Key.CHAR_K], () => {
      alert("This will show when you hit your shortcut");
    });
    return () => {
      if (removeShortcut) {
        removeShortcut();
      }
    }
  }, []);
}

The useKeyboardEventBus's add method returns a callback to remove the shortcut from the keyboard event bus list. Use it when you want to remove the shortcut, for example on component re-render.

List of available keys

Key	Description
SHIFT_LEFT	Left Shift
SHIFT_RIGHT	Right Shift
SHIFT	All Shift
TAB	Tab
CTRL_LEFT	Left Control
CTRL_RIGHT	Right Control
CTRL	Control
CMD_CTRL	Command / Control (Use Command on MacOs and Control on Windows)
ALT_LEFT	Left Alt
ALT_RIGHT	Right Alt
ALT	All Alt
CMD_LEFT	Left Meta / Command
CMD_RIGHT	Right Meta / Command
CMD	All Meta / Command
BACKSPACE	Backspace
ENTER	Enter
CAPSLOCK	CapsLock
CHAR_A	a
CHAR_B	b
CHAR_C	c
CHAR_D	d
CHAR_E	e
CHAR_F	f
CHAR_G	g
CHAR_H	h
CHAR_I	i
CHAR_J	j
CHAR_K	k
CHAR_L	l
CHAR_M	m
CHAR_N	n
CHAR_O	o
CHAR_P	p
CHAR_Q	q
CHAR_R	r
CHAR_S	s
CHAR_T	t
CHAR_U	u
CHAR_V	v
CHAR_W	w
CHAR_X	x
CHAR_Y	y
CHAR_Z	z
NUM_0	0
NUM_1	1
NUM_2	2
NUM_3	3
NUM_4	4
NUM_5	5
NUM_6	6
NUM_7	7
NUM_8	8
NUM_9	9
BACKQUOTE	`
SLASH	/
BACKSLASH	\