useKeyModifier
A React Hook that allows you to detect if a key modifier is pressed.
Demo
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const isModifierPressed = useKeyModifier(keyModifier, options)
KeyModifier
export type KeyModifier =
| 'Alt'
| 'AltGraph'
| 'CapsLock'
| 'Control'
| 'Fn'
| 'FnLock'
| 'Meta'
| 'NumLock'
| 'ScrollLock'
| 'Shift'
| 'Symbol'
| 'SymbolLock'
Options
export type UseModifierOptions<Initial> = {
/**
* Event names that will prompt update to modifier states
*
* @defaultValue ['mousedown', 'mouseup', 'keydown', 'keyup']
*/
events?: WindowEventName[]
/**
* Initial value of the returned ref
*
* @defaultValue null
*/
initial?: Initial
}
Returns
boolean | null, boolean indicates if the key modifier is pressed, null is means that the events not yet fired.
export type UseKeyModifierReturns<Initial> = Initial extends boolean ? boolean : boolean | null
