Skip to content

Releases: JohannesKlauss/react-hotkeys-hook

4.0.0-5

19 Aug 14:26
Compare
Choose a tag to compare
4.0.0-5 Pre-release
Pre-release

🐛 Bugfixes

  • Interpret return key as enter

4.0.0-4

19 Aug 13:15
Compare
Choose a tag to compare
4.0.0-4 Pre-release
Pre-release

🐛 Bugfixes

  • Fixed handling of meta key on macOS.
  • Added esc as alias for escape

4.0.0-3

30 Jul 10:04
Compare
Choose a tag to compare
4.0.0-3 Pre-release
Pre-release

🐛 Bugfixes

  • Fixed infinite loop when using array for the scopes option in useHotkeys

4.0.0-2

24 Jul 08:57
Compare
Choose a tag to compare
4.0.0-2 Pre-release
Pre-release

💥 Breaking Changes

  • The browsers default behavior will always be prevented when the hook is not enabled or the enabled function resolves to false.

🏗️ Improvements

  • Updated Readme to reflect all new options

4.0.0-1

22 Jul 15:51
Compare
Choose a tag to compare
4.0.0-1 Pre-release
Pre-release

The first pre release of version 4!

Note that there are a lot of breaking changes, so it will be unlikely that your app won't need any updating.

🚨 Breaking Changes

  • filter merges into enabled
  • enabled takes a Trigger. A trigger can either be a boolean or a a function that return a boolean to determine if the option should trigger. The function gets the keyboardEvent and the hotkeysEvent which you can use to determine if the hotkey should be enabled or not.
  • splitKey is now called combinationKey (still defaults to +)
  • splitKey now refers to the separation of keystrokes (defaults to ,)
  • The dependency list is now properly typed as DependencyList instead of any[]
  • cmd and command hotkeys are not longer available. Use meta instead.
  • enableOnTags has been renamed to enableOnFormTags

➕ Features useHotkeys

Arguments

  • The options object and the dependency array are swappable. This means that you can call useHotkeys in multiple ways:
    • useHotkeys('ctrl+a', () => console.log('pressed'))
    • useHotkeys('ctrl+a', () => console.log('pressed'), options)
    • useHotkeys('ctrl+a', () => console.log('pressed'), [dependencyA, dependencyB])
    • useHotkeys('ctrl+a', () => console.log('pressed'), options, [dependencyA, dependencyB])
    • useHotkeys('ctrl+a', () => console.log('pressed'), [dependencyA, dependencyB], options) (possible, but not recommended, might be dropped for release)
  • The first argument can be an array: useHotkeys(['ctrl+a', 'shift+b'], () => console.log('pressed'))

Scopes

  • Scopes You can now group hotkeys together in scopes. To use that feature you need to wrap your app in a <HotkeysProvider> component. Scopes are toggled by using the useHotkeysContext() hook. It returns the following functions:
    • activateScope: (scope: string) => void - Activates given scope, i.e. activateScope('settings')
    • deactivateScope: (scope: string) => void - Deactivates given scope, i.e. deactivateScope('settings')
    • toggleScope: (scope: string) => void - Toggles a given scope, i.e. toggleScope('settings')
    • activeScopes: string[] - Returns an array with all active scopes (defaults to ['*'] for wildcard)
    • hotkeys: Hotkey[] - Returns an array of all currently bound hotkeys
    • The default scope is * which matches all hotkeys no matter their scope(s).
  • To set a scope to a hotkey, use the scopes option in the options object: useHotkeys('a', () => console.log('I am in scope settings'), {scopes: 'settings'}). This hotkey will only be active, when the "settings" scope is activated.
    • A hotkey can hold multiple scopes: useHotkeys('a', () => console.log('I am in scope settings'), {scopes: ['settings', 'profile']})`

Options

  • enabled takes a Trigger. A trigger can either be a boolean or a a function that return a boolean to determine if the option should trigger. The function gets the keyboardEvent and the hotkeysEvent which you can use to determine if the hotkey should be enabled or not. Default is true.
  • preventDefault take a Trigger to determine if the browsers default behavior should be prevented (calling e.preventDefault() internally if Trigger resolves to true). Defaults to false.
  • enableOnTags now also accepts a boolean. If set to true, all form Tags will be enabled (defaults to false)

➕ Features isHotkeyPressed

  • takes an array or string as first argument to check if the key or combination of keys is currently pressed down: isHotkeyPressed('a') | isHotkeyPressed(['a', 'b']) | isHotkeyPressed('a, b')
  • takes a splitKey string to split between hotkeys (only works if first argument is a string): isHotkeyPressed('a+,', '+')

3.4.7

22 Jul 08:40
Compare
Choose a tag to compare
  • Fixed a bug where the enableOnTags option did not work when using hotkeys scoped to a component

3.4.6

13 May 14:53
Compare
Choose a tag to compare

Fixed build files

3.4.5

13 May 12:20
Compare
Choose a tag to compare
  • Updated README to new format
  • Add sponsored Badge

3.4.4

18 Oct 07:58
Compare
Choose a tag to compare
  • Correctly export isHotkeyPressed function (#628)

3.4.3

26 Sep 14:43
Compare
Choose a tag to compare
  • Fixed support link in Readme