useKeyModifier

跟踪按键是否被按下

Usage

实时编辑器

function Demo() {
  const Button = (props: { mode: boolean; name: string }) => {
    const { mode, name } = props;
    return (
      <button style={mode ? { background: "var(--c-input-border-focus)" } : {}}>
        {name}
      </button>
    );
  };

  const capsLock = useKeyModifier("CapsLock");
  const numLock = useKeyModifier("NumLock");
  const scrollLock = useKeyModifier("ScrollLock");
  const shift = useKeyModifier("Shift");
  const control = useKeyModifier("Control");
  const alt = useKeyModifier("Alt");

  return (
    <div>
      <div style={{ marginBottom: 10 }}>
        <Button mode={capsLock} name="CapsLock" />
        <Button mode={numLock} name="NumLock" />
        <Button mode={scrollLock} name="ScrollLock" />
      </div>
      <div>
        <Button mode={shift} name="Shift" />
        <Button mode={control} name="Control" />
        <Button mode={alt} name="Alt" />
      </div>
    </div>
  );
};

结果

Loading...

API

useKeyModifier

Returns

boolean: 按键是否被按下

Arguments

参数名	描述	类型	默认值
modifier	键位	KeyModifier (必填)	-
options	可选参数	UseModifierOptions | undefined	-

UseModifierOptions

参数名	描述	类型	默认值
events	更新按键状态的事件	(keyof WindowEventMap)[]	['mousedown', 'mouseup', 'keydown', 'keyup']
initial	初始值	boolean	false

KeyModifier

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