Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

2.3 KiB

Raw Blame History

category
Sensors

useKeyModifier

Reactive Modifier State. Tracks state of any of the supported modifiers - see Browser Compatibility notes.

Learn useKeyModifier with this FREE video lesson from Vue School!

Usage

import { useKeyModifier } from '@vueuse/core';

const capsLockState = useKeyModifier('CapsLock');

console.log(capsLockState.value);

Events

You can customize which events will prompt the state to update. By default, these are mouseup, mousedown, keyup, keydown. To customize these events:

import { useKeyModifier } from '@vueuse/core';

const capsLockState = useKeyModifier('CapsLock', { events: ['mouseup', 'mousedown'] });

console.log(capsLockState); // null

// Caps Lock turned on with key press
console.log(capsLockState); // null

// Mouse button clicked
console.log(capsLockState); // true

Initial State

By default, the returned ref will be Ref<null> until the first event is received. You can explicitly pass the initial state to it via:

import { useKeyModifier } from '@vueuse/core';
// ---cut---
const capsLockState1 = useKeyModifier('CapsLock'); // Ref<boolean | null>
const capsLockState2 = useKeyModifier('CapsLock', { initial: false }); // Ref<boolean>

Type Declarations

export type KeyModifier =
  | 'Alt'
  | 'AltGraph'
  | 'CapsLock'
  | 'Control'
  | 'Fn'
  | 'FnLock'
  | 'Meta'
  | 'NumLock'
  | 'ScrollLock'
  | 'Shift'
  | 'Symbol'
  | 'SymbolLock';
export interface UseModifierOptions<Initial> extends ConfigurableDocument {
  /**
   * Event names that will prompt update to modifier states
   *
   * @default ['mousedown', 'mouseup', 'keydown', 'keyup']
   */
  events?: WindowEventName[];
  /**
   * Initial value of the returned ref
   *
   * @default null
   */
  initial?: Initial;
}
export type UseKeyModifierReturn<Initial> = ShallowRef<
  Initial extends boolean ? boolean : boolean | null
>;
export declare function useKeyModifier<Initial extends boolean | null>(
  modifier: KeyModifier,
  options?: UseModifierOptions<Initial>,
): UseKeyModifierReturn<Initial>;

2.3 KiB Raw Blame History