Sensors

useKeyModifier

Reactively tracks the state of a keyboard modifier key (Shift, Control, Alt, CapsLock, etc.) using event.getModifierState(). Updates on keyboard and mouse events.

Demo

Key Modifier

Press modifier keys to see their state change in real-time.

Shift: Off

Ctrl: Off

Alt: Off

Meta: Off

CapsLock: Off

import { 
const useKeyModifier: <Initial extends boolean | null = null>(modifier: KeyModifier, options?: UseKeyModifierOptions<Initial>) => UseKeyModifierReturn<Initial>
useKeyModifier } from "@usels/web";

function 
function ModifierTracker(): JSX.Element
ModifierTracker() {
  const 
const shift$: UseKeyModifierReturn<null>
shift$ = 
useKeyModifier<null>(modifier: KeyModifier, options?: UseKeyModifierOptions<null> | undefined): UseKeyModifierReturn<null>
Framework-agnostic reactive tracker for keyboard modifier key state.
Uses event.getModifierState() to detect whether a modifier key
(Shift, Control, Alt, CapsLock, etc.) is currently active.
useKeyModifier("Shift");
  const 
const ctrl$: UseKeyModifierReturn<null>
ctrl$ = 
useKeyModifier<null>(modifier: KeyModifier, options?: UseKeyModifierOptions<null> | undefined): UseKeyModifierReturn<null>
Framework-agnostic reactive tracker for keyboard modifier key state.
Uses event.getModifierState() to detect whether a modifier key
(Shift, Control, Alt, CapsLock, etc.) is currently active.
useKeyModifier("Control");
  const 
const alt$: UseKeyModifierReturn<null>
alt$ = 
useKeyModifier<null>(modifier: KeyModifier, options?: UseKeyModifierOptions<null> | undefined): UseKeyModifierReturn<null>
Framework-agnostic reactive tracker for keyboard modifier key state.
Uses event.getModifierState() to detect whether a modifier key
(Shift, Control, Alt, CapsLock, etc.) is currently active.
useKeyModifier("Alt");
  const 
const capsLock$: UseKeyModifierReturn<null>
capsLock$ = 
useKeyModifier<null>(modifier: KeyModifier, options?: UseKeyModifierOptions<null> | undefined): UseKeyModifierReturn<null>
Framework-agnostic reactive tracker for keyboard modifier key state.
Uses event.getModifierState() to detect whether a modifier key
(Shift, Control, Alt, CapsLock, etc.) is currently active.
useKeyModifier("CapsLock");

  return (
    <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Shift: {
const shift$: UseKeyModifierReturn<null>
shift$.
ImmutableObservableBase<boolean | null>.get(trackingType?: TrackingType | GetOptions): any
get() ? "Pressed" : "Released"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Ctrl: {
const ctrl$: UseKeyModifierReturn<null>
ctrl$.
ImmutableObservableBase<boolean | null>.get(trackingType?: TrackingType | GetOptions): any
get() ? "Pressed" : "Released"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Alt: {
const alt$: UseKeyModifierReturn<null>
alt$.
ImmutableObservableBase<boolean | null>.get(trackingType?: TrackingType | GetOptions): any
get() ? "Pressed" : "Released"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>CapsLock: {
const capsLock$: UseKeyModifierReturn<null>
capsLock$.
ImmutableObservableBase<boolean | null>.get(trackingType?: TrackingType | GetOptions): any
get() ? "On" : "Off"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
    </
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

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>
  );
}

Type

Parameters

Parameter	Type	Description
`modifier`	`KeyModifier`	-
`options`	`UseKeyModifierOptions<Initial>` (optional)	-

UseKeyModifierOptions

Option	Type	Default	Description
`events`	`string[]`	`-`	Events to listen for modifier state changes
`initial`	`Initial`	`-`	Initial value before any event fires
`window`	`WindowSource`	`-`	-

Returns

UseKeyModifierReturn<Initial>

Name	Type	Description
`peek`	`{ (): RemoveObservables<Initial extends boolean ? boolean : boolean \| null>; (): Initial extends boolean ? boolean : boolean \| null; }`	-
`get`	`(trackingType?: TrackingType \| GetOptions) => RemoveObservables<Initial extends boolean ? boolean : boolean \| null>`	-
`onChange`	`(cb: ListenerFn<Initial extends boolean ? boolean : boolean \| null>, options?: { trackingType?: TrackingType; initial?: boolean \| undefined; immediate?: boolean \| undefined; noArgs?: boolean \| undefined; } \| undefined) => () => void`	-

Source

View on GitHub