usehotkey

react hooks of @github/hotkey

Feature

• A react hooks wrapper of @github/hotkey
• The easiest API possible
• Coded perfectly for react component lifecycle
• Supports triggering Function with hotkey. HTML DOM is not necessary.

Demo

https://smarthug.github.io/useHotkey/

Install

npm install use-github-hotkey

Usage

import React from 'react'
import { useHotkey, installFuncHotkey } from 'use-github-hotkey'

export default function App() {
  // keyboard shortcut with dom
  const setTestShortcut = useHotkey("t e")

  // keyboard shortcut with function
  installFuncHotkey(handleFunction, "t t")

  function handleClick() {
    alert("t e clicked");
  }

  function handleFunction() {
    alert("t t clicked");
  }

  return (
    <div>
      <h1>example</h1>
      <button ref={setTestShortcut} onClick={handleClick} >press "t e" to click this button with hotkey</button>
      <h3>press "t t" to invoke function with hotkey</h3>
    </div>
  )
}

License

MIT © smarthug