Skip to content

Releases: JohannesKlauss/react-hotkeys-hook

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

3.4.2

25 Sep 17:46
Compare
Choose a tag to compare
  • Updated Readme to complement new documentation and support channels.

3.4.1

24 Sep 13:05
Compare
Choose a tag to compare

3.4.0

23 Jul 11:43
Compare
Choose a tag to compare
  • Expose isHotkeyPressed without the Hook. Deprecate useIsHotkeyPressed a17c33c

3.3.3

23 Jul 08:32
Compare
Choose a tag to compare
  • Added documentation homepage to package.json 9548321
  • Added discussion issue link d6f42e8