🎉 Happy Release day 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:
  • enableScope: (scope: string) => void - Activates given scope, i.e. activateScope('settings')
  • disableScope: (scope: string) => void - Deactivates given scope, i.e. deactivateScope('settings')
  • toggleScope: (scope: string) => void - Toggles a given scope, i.e. toggleScope('settings')
  • enabledScopes: 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+,', '+')

Detailed Info can be found in the documentation: https://react-hotkeys-hook.vercel.app/docs/intro