React hook for using keyboard shortcuts in components.
MIT License
Bot releases are visible (Hide)
Published by JohannesKlauss almost 2 years ago
Streamline pressed down keys handling. Remove doubled set from useHotkeys. Add special handling for meta key
Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.1.0-0...v4.1.0-1
Published by JohannesKlauss almost 2 years ago
Fixed Meta key issue in macOS
Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.0.8...v4.1.0-0
Published by JohannesKlauss almost 2 years ago
Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.0.7...v4.0.8
Published by JohannesKlauss almost 2 years ago
Full Changelog: https://github.com/JohannesKlauss/react-hotkeys-hook/compare/v4.0.6...v4.0.7
Published by JohannesKlauss almost 2 years ago
window
objectPublished by JohannesKlauss almost 2 years ago
Published by JohannesKlauss almost 2 years ago
Published by JohannesKlauss almost 2 years ago
Note that there are a lot of breaking changes, so it will be unlikely that your app won't need any updating.
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 ,
)DependencyList
instead of any[]
cmd
and command
hotkeys are not longer available. Use meta
instead.enableOnTags
has been renamed to enableOnFormTags
useHotkeys
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)useHotkeys(['ctrl+a', 'shift+b'], () => console.log('pressed'))
<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*
which matches all hotkeys no matter their scope(s).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.
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
)isHotkeyPressed
isHotkeyPressed('a')
| isHotkeyPressed(['a', 'b'])
| isHotkeyPressed('a, b')
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
Published by JohannesKlauss almost 2 years ago
activateScope
to enableScope
, deactivateScope
to disableScope
and activeScopes
to enabledScopes
Published by JohannesKlauss almost 2 years ago
left
to arrowLeft
, right
to arrowRight
, etc.Published by JohannesKlauss about 2 years ago
return
key as enter
Published by JohannesKlauss about 2 years ago
meta
key on macOS.esc
as alias for escape
Published by JohannesKlauss about 2 years ago
scopes
option in useHotkeys
Published by JohannesKlauss about 2 years ago
false
.Published by JohannesKlauss about 2 years ago
Note that there are a lot of breaking changes, so it will be unlikely that your app won't need any updating.
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 ,
)DependencyList
instead of any[]
cmd
and command
hotkeys are not longer available. Use meta
instead.enableOnTags
has been renamed to enableOnFormTags
useHotkeys
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)useHotkeys(['ctrl+a', 'shift+b'], () => console.log('pressed'))
<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*
which matches all hotkeys no matter their scope(s).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.
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
)isHotkeyPressed
isHotkeyPressed('a')
| isHotkeyPressed(['a', 'b'])
| isHotkeyPressed('a, b')
splitKey
string to split between hotkeys (only works if first argument is a string): isHotkeyPressed('a+,', '+')
Published by JohannesKlauss about 2 years ago
enableOnTags
option did not work when using hotkeys scoped to a componentPublished by JohannesKlauss over 2 years ago
Fixed build files
Published by JohannesKlauss over 2 years ago
Published by JohannesKlauss about 3 years ago
isHotkeyPressed
function (#628)Published by JohannesKlauss about 3 years ago