Skip to content

⌨️ A zero-dependencies hook for capturing keyboard shortcuts in components.

License

Notifications You must be signed in to change notification settings

nucleotidy/react-shortcuts-hook

Repository files navigation

⌨️ react-shortcuts-hook ⌨️

A zero-dependencies, lightweight hook for capturing keyboard shortcuts in components. 5 times lighter than react-hotkeys-hook, 4 times lighter than use-hotkeys.

npm npm bundle size

Install

NPM

npm install --save react-shortcuts-hook

Or with Yarn:

yarn add react-shortcuts-hook

Usage

import React, { useState } from 'react'
import { useShortcuts } from 'react-shortcuts-hook'

const App = () => {
  const [count, setCounter] = useState(0)
  useShortcuts(['control', 'k'], () => setCounter(count + 1), [count])

  return (
    <div>
      {`You've pressed Control+K ${count} times.`}
    </div>
  )
}

export default App

Live example

Edit basic-example

Parameters

  • keys: string[]: Here you can set a single key, or a combination of keys, that you want hook to listen to. Every entry of this array should be a string with a proper KeyboardEvent.key value. Here you can find a nice cheatsheet.
  • callback: () => void: This is a callback that fires when all of the keys specified in the first argument are pressed at the same time. Note that is gets memoized under the hood, so you don't have to do that by yourself.
  • deps: any[] = []: This is the dependency array that gets appended to memoisation of your callback. If you depend on values that change over time, you should put them here.

Thanks

License

MIT © Nikita Volkov


This hook was bootstrapped using create-react-hook.

About

⌨️ A zero-dependencies hook for capturing keyboard shortcuts in components.

Resources

License

Stars

Watchers

Forks

Packages

No packages published