Shortcut Guide Popup Componet For React

Description:

A React component that displays a shortcut guide popup on the screen when users press ⌘ or ?.

How to use it:

1. Install and import the Shortcut Guide component.

# NPM
$ npm i react-shortcut-guide

import React from 'react'
import { render } from 'react-dom'
import { ShortcutProvider } from 'react-shortcut-guide'

render(<App />, document.getElementById('app'))
function App() {
  return (
    <ShortcutProvider
      options={{
        darkMode: 'media',
      }}
    >
      <Comp />
    </ShortcutProvider>
  )
}

2. Register your own keyboard shortcuts.

import { useShortcut } from 'react-shortcut-guide'

useShortcut(
  'A',
  [Modifier.Meta],
  (e) => {
    console.log('a')
  },
  'Print A',
  options,
)

3. Provider options.

type ShortcutOptions = {
  darkMode?: 'media' | 'class'
  /**
   * @default 'body.dark'
   */
  darkClassName?: string
  /**
   * time to wait before triggering the shortcut guide
   * @default 1000
   */
  holdCommandTimeout?: number
  /**
   * time to wait before closing the shortcut guide
   * @default 1000
   */
  stayCommandTimeout?: number
  /**
   * open event
   */
  onGuidePanelOpen?: () => any
  /**
   * close event
   */
  onGuidePanelClose?: () => any
}

4. Hook options.

type RegisterShortcutOptions = {
  /**
   * disable shortcuts on input
   * @default true
   */
  preventInput?: boolean
  /**
   * hide this shortcut?
   * @default false
   */
  hiddenInPanel?: boolean
}

Preview: