fn

useKeyModifier

v0.0.14testeddemo

Reactive state of a keyboard modifier (CapsLock, NumLock, Shift, Control, Alt, Meta, ...) tracked via KeyboardEvent.getModifierState.

Examples

ts
const capsLock = useKeyModifier('CapsLock');
watch(capsLock, (on) => {
  if (on) showCapsLockWarning();
});
ts
const shift = useKeyModifier('Shift', { initial: false, events: ['keydown', 'keyup'] });

Demo

Loading demo…

Signature

ts
export function useKeyModifier<Initial extends boolean | null = null>(
  modifier: KeyModifier,
  options: UseKeyModifierOptions<Initial> ={ ... }

Type Parameters

Initialextends boolean | null= null

Parameters

ParameterTypeDescription
modifierKeyModifierThe modifier key to observe
options?UseKeyModifierOptions<Initial>Options (events to listen on, initial value, custom document)

Returns

UseKeyModifierReturn<Initial>A shallow ref holding the current modifier state (null until the first matching event)