R
fn

useKeyModifier

v0.0.15testeddemo

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)