---
title: useKeyModifier
description: "Reactively tracks the state of a keyboard modifier key (Shift, Control, Alt, CapsLock, etc.) using `event.getModifierState()`. Updates on keyboard and mouse events."
category: Sensors
sidebar:
  order: 1
type-table:
  import: "@usels/web"
  name: "UseKeyModifier"
  params:
    children:
      - UseKeyModifierOptions
---

## Demo

## Usage

<CodeTabs>
  <Fragment slot="hook">
    ```tsx twoslash
    // @noErrors
    import { useKeyModifier } from "@usels/web";

    function ModifierTracker() {
      const shift$ = useKeyModifier("Shift");
      const ctrl$ = useKeyModifier("Control");
      const alt$ = useKeyModifier("Alt");
      const capsLock$ = useKeyModifier("CapsLock");

      return (
        <div>
          <p>Shift: {shift$.get() ? "Pressed" : "Released"}</p>
          <p>Ctrl: {ctrl$.get() ? "Pressed" : "Released"}</p>
          <p>Alt: {alt$.get() ? "Pressed" : "Released"}</p>
          <p>CapsLock: {capsLock$.get() ? "On" : "Off"}</p>
        </div>
      );
    }
    ```

  </Fragment>
  <Fragment slot="scope">
    ```tsx
    import { createKeyModifier } from "@usels/web";

    function ModifierTracker() {
      "use scope"
      const shift$ = createKeyModifier("Shift");
      const ctrl$ = createKeyModifier("Control");
      const alt$ = createKeyModifier("Alt");
      const capsLock$ = createKeyModifier("CapsLock");

      return (
        <div>
          <p>Shift: {shift$.get() ? "Pressed" : "Released"}</p>
          <p>Ctrl: {ctrl$.get() ? "Pressed" : "Released"}</p>
          <p>Alt: {alt$.get() ? "Pressed" : "Released"}</p>
          <p>CapsLock: {capsLock$.get() ? "On" : "Off"}</p>
        </div>
      );
    }
    ```

  </Fragment>
</CodeTabs>