npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2021 – Pkg Stats / Ryan Hefner

react-hotkeys-hook

v3.4.0

Published

React hook for using keyboard shortcuts in components. This is a hook version for the [hotkeys] package.

Downloads

410,794

Readme

react-hotkeys-hook

React hook for using keyboard shortcuts in components. This is a hook version for the hotkeys package.

Join the discussion for version 4!

If you use this package please share your thoughts on how we can improve this hook with version 4. Please engage at the corresponding Github issue.

Documentation and live example

https://johannesklauss.github.io/react-hotkeys-hook/

Installation

npm install react-hotkeys-hook

or

yarn add react-hotkeys-hook

Make sure that you have at least version 16.8 of react and react-dom installed, or otherwise hooks won't work for you.

Usage

export const ExampleComponent = () => {
  const [count, setCount] = useState(0);
  useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1));
    
  return (
    <p>
      Pressed {count} times.
    </p>
  );
};

The hook takes care of all the binding and unbinding for you. As soon as the component mounts into the DOM, the key stroke will be listened to. When the component unmounts it will stop listening.

Call Signature

useHotkeys(keys: string, callback: (event: KeyboardEvent, handler: HotkeysEvent) => void, options: Options = {}, deps: any[] = [])

Parameters

  • keys: string: Here you can set the key strokes you want the hook to listen to. You can use single or multiple keys, modifier combination, etc. See this section on the hotkeys documentation for more info.
  • callback: (event: KeyboardEvent, handler: HotkeysEvent) => void: Gets executed when the defined keystroke gets hit by the user. Important: Since version 1.5.0 this callback gets memoised inside the hook. So you don't have to do this anymore by yourself.
  • options: Options = {}
    • filter: (event: KeyboardEvent): boolean is used to filter if a callback gets triggered depending on the keyboard event. Breaking Change in 3.0.0! Prior to version 3.0.0 the filter settings was one global setting that applied to every hook. Since 3.0.0 this behavior changed. The filter option is now locally scoped to each call of useHotkeys.
    • filterPreventDefault: boolean is used to prevent/allow the default browser behavior for the keystroke when the filter return false (default value: true)
    • enableOnTags: string[] is used to enable listening to hotkeys in form fields. Available values are INPUT, TEXTAREA and SELECT.
    • splitKey: string is used to change the splitting character inside the keys argument. Default is +, but if you want to listen to the + character, you can set splitKey to i.e. - and listen for ctrl-+
    • keyup: boolean Determine if you want to listen on the keyup event
    • keydown: boolean Determine if want to listen on the keydown event
    • enabled: boolean is used to prevent installation of the hotkey when set to false (default value: true)
  • deps: any[] = []: The dependency array that gets appended to the memoisation of the callback. Here you define the inner dependencies of your callback. If for example your callback actions depend on a referentially unstable value or a value that will change over time, you should add this value to your deps array. Since most of the time your callback won't depend on any unstable callbacks or changing values over time you can leave this value alone since it will be set to an empty array by default. See the Memoisation section to learn more and see an example where you have to set this array.

useIsHotkeyPressed hook

The useIsHotkeyPressed hook just returns the hotkeys.isPressed function and works exactly the same.

const isPressed = useIsHotkeyPressed();

isPressed('return'); // Returns true if Return key is pressed down.

Found an issue or have a feature request?

Open up an issue or pull request and participate.

Local Development

Checkout this repo, run yarn or npm i and then run the docz:dev script. You can use the docs/useHotkeys.mdx to test the behavior of the hook. It directly imports the src/index.ts file and transpiles it automatically. So you don't have to worry about. For more info on .mdx files, check out the docz documentation: https://www.docz.site/docs/writing-mdx

Authors

  • Johannes Klauss

Contributors


MIT License.