useKeyModifier

Tags:

一个 React 钩子,允许你检测是否按下了 键修饰符

演示

源码
Control
Alt/Opt
Shift
CapsLock
NumLock
ScrollLock

用法

请查看 API。

源码

点击下方链接跳转 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> = {
  /**
   * 将提示修改器状态更新的事件名称
   *
   * @defaultValue ['mousedown', 'mouseup', 'keydown', 'keyup']
   */
  events?: WindowEventName[]
  /**
   * 返回的 ref 的初始值
   *
   * @defaultValue null
   */
  initial?: Initial
}

返回值

boolean | null, boolean 表示键修饰符是否被按下,null 表示事件尚未触发。

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