useKeyModifier

Category

Sensors

Export Size

302 B

Last Changed

5 days ago

Reactive Modifier State. Tracks state of any of the supported modifiers

Demo

Usage

import { useKeyModifier } from '@reause/core'

const capsLockState = useKeyModifier('CapsLock') // boolean | null

console.log(capsLockState)

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 '@reause/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 controllable state will be null until the first event is received. You can explicitly pass the initial state to it via:

import { useKeyModifier } from '@reause/core'

const capsLockState1 = useKeyModifier('CapsLock') // boolean | null
const capsLockState2 = useKeyModifier('CapsLock', { initial: false }) // boolean

Type Declarations

export type KeyModifier = 'Alt' | 'AltGraph' | 'CapsLock' | 'Control' | 'Fn' | 'FnLock' | 'Meta' | 'NumLock' | 'ScrollLock' | 'Shift' | 'Symbol' | 'SymbolLock'

export interface UseModifierOptions<Initial> {
    events?: (keyof WindowEventMap)[];
    initial?: Initial;
    document?: Document;
}

export type UseKeyModifierReturn<Initial> = Initial extends boolean ? boolean : boolean | null

export function useKeyModifier<Initial extends boolean | null>(modifier: KeyModifier, options?: UseModifierOptions<Initial>): UseKeyModifierReturn<Initial>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e608a - feat(ci): align CI, packaging and release with VueUse

967f0 - fix(core): resolve useKeyModifier audit findings (#585)