React Hotkeys Hook Versions Save

React hook for using keyboard shortcuts in components.

v5.0.0-1

3 months ago

🎉 First stable Pre Release for Version 5!

Most users should not need to do any migration, but for those who use special characters (+,-/$? and so on) or a different delimiter key than + there is a bit of work to do.

🚨 Breaking Changes

<HotkeysProvider>

  • enabledScopes in the HotkeysProvider has been renamed to activeScopes
  • If all scopes are disabled in the HotkeysProvider no hotkeys will be active

useHotkeys

  • The hook now only listens to the code of the hotkey, not the produced key. This will get rid of all the confusion between different keyboard layouts, multiple accidental triggers and so on.
  • Special character mappings to the german keyboard layout code have been removed
  • The splitKey option has been renamed to delimiter
  • The combinationKey option has been renamed to delimiter
  • New Option useKey: Setting this to true will listen to the produced key rather than the code. Helpful if you want to listen to something like ?, +, !...

🐛 Bugfixes

  • Fixed a bug where listening to control instead of ctrl wouldn't trigger correctly

Migration Guide

  • If you are using the splitKey option, rename that to delimiter
  • If you are using the combinationKey option, rename that to splitKey

If you are listening to special characters like shift+1 in order to listen for the exclamation mark, rewrite your hook like so:

useHotkeys('!', callback, {useKey: true})

This will listen to the produced key instead of the code. Listening for shift is not necessary anymore, because the hook will only check if the produced key matches !, no matter how it has been produced. This will be layout agnostic.

If you want to listen to specifically shift+1, then use the hotkey like this:

useHotkeys('shift+1', callback)

useKey defaults to false, so you only need to set it, if you want to listen to special characters.

One common use case for this is listening to y and z. On a german layout those keys are swapped. So to comply with every possible keyboard layout, you would set useKey: true to listen to the produced key.

useHotkeys('y', callback, {useKey: true}) // Triggers if the user hits their y key on the keyboard depending on the layout
useHotkeys('y', callback) // Triggers if the user hits the y key implying US keyboard layout

v4.5.0

3 months ago

What's Changed

New Contributors

Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.4.4...v4.5.0

v4.4.4

4 months ago

What's Changed

Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.4.3...v4.4.4

v4.4.3

4 months ago

What's Changed

New Contributors

Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.4.2...v4.4.3

v4.4.2

4 months ago

What's Changed

New Contributors

Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.4.1...v4.4.2

v4.4.1

10 months ago

What's Changed

New Contributors

Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.4.0...v4.4.1

v4.4.0

1 year ago

What's Changed

New Contributors

Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.3.8...v4.4.0

v4.3.8

1 year ago

What's Changed

New Contributors

Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.3.7...v4.3.8

v4.3.7

1 year ago

What's Changed

Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.3.6...v4.3.7

v4.3.6

1 year ago

What's Changed

Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.3.5...v4.3.6