rekeys

Tiny React hook for keyboard shortcuts.

Install

npm install @oqaan/rekeys

Why

Instead of writing this every time:

useEffect(() => {
  const handler = (e: KeyboardEvent) => {
    if (e.metaKey && e.key === 'k') openSearch()
  }
  window.addEventListener('keydown', handler)
  return () => window.removeEventListener('keydown', handler)
}, [openSearch])

Just write:

useHotkeys('mod+k', openSearch)

Usage

import { useHotkeys } from '@oqaan/rekeys'

// Basic
useHotkeys('mod+k', openSearch)

// With options
useHotkeys('mod+s', save, { preventDefault: true, when: isEditing })

// Multiple shortcuts
useHotkeys([
  ['mod+k', openSearch],
  ['mod+s', save],
])

Options

| Option | Type | Default | Description | |---|---|---|---| | preventDefault | boolean | false | Calls event.preventDefault() on match | | when | boolean | true | Set to false to disable without removing the listener | | target | EventTarget | window | Element to attach the listener to |

Modifiers

| Key | Alias | Notes | |---|---|---| | cmd | meta | ⌘ on Mac, Win key on Windows | | ctrl | control | | | shift | | | | alt | option | | | mod | | cmd on Mac, ctrl on Windows/Linux |

License

MIT