Key Press Indicator

The useKeyPressIndicator hook provides comprehensive key press tracking and history management.

import { useKeyPressIndicator } from '@ertekinno/human-like/keyboard';
import type { KeyInfo, KeyPressEvent } from '@ertekinno/human-like/keyboard';

export default function MyComponent() {
  const { keyHistory, addKeyPress, clearHistory } = useKeyPressIndicator(20);
  
  // Use keyHistory to build your own visualization
  return (
    <div>
      {keyHistory.map((event) => (
        <div key={event.id}>
          {event.keyInfo.key} - {event.keyInfo.type} - {event.keyInfo.duration}ms
        </div>
      ))}
    </div>
  );
}

Hook Interface

The useKeyPressIndicator hook provides state management:

interface KeyPressIndicatorHook {
  keyHistory: KeyPressEvent[];
  addKeyPress: (keyInfo: KeyInfo) => void;
  clearHistory: () => void;
}

Parameters

Name	Type	Default	Description	Example
`maxHistory`	`number`	`10`	Maximum number of key presses to store with automatic cleanup	`20`

Key Press Event Structure

Each key press is stored with comprehensive metadata:

interface KeyPressEvent {
  keyInfo: KeyInfo;
  timestamp: number;
  id: string;
}

interface KeyInfo {
  key: string;              // Key identifier (e.g., 'h', 'shift', '123', 'ABC')
  character: string;        // Original character produced (e.g., 'H', '@', '4')
  type: 'letter' | 'number' | 'symbol' | 'modifier' | 'view-switch' | 'space' | 'enter' | 'backspace';
  keyboardView: 'letters' | 'numbers' | 'symbols' | 'emoji';
  isCapsLock: boolean;     // Whether this is part of caps lock sequence
  duration: number;        // How long to highlight/hold key (ms)
  sequenceIndex: number;   // Position in key sequence (0-based)
  sequenceLength: number;  // Total keys in character sequence
}

Usage Patterns

Basic Key Tracking

Track key presses with configurable history size:

import { useHumanLike } from '@ertekinno/human-like';
import { useKeyPressIndicator } from '@ertekinno/human-like/keyboard';
import type { KeyInfo } from '@ertekinno/human-like/keyboard';

const { keyHistory, addKeyPress, clearHistory } = useKeyPressIndicator(15);

// Integrate with useHumanLike
const humanLike = useHumanLike({
  text: "Hello world!",
  config: {
    onKey: (keyInfo: KeyInfo) => {
      addKeyPress(keyInfo); // Direct KeyInfo passing
    }
  }
});

Memory Efficient Usage

The hook automatically cleans up old entries based on maxHistory:

// Only keep last 5 key presses in memory
const { keyHistory } = useKeyPressIndicator(5);

Custom Visualization

Build your own key press visualization:

function CustomKeyDisplay() {
  const { keyHistory } = useKeyPressIndicator(10);
  
  return (
    <div className="key-history">
      {keyHistory.map((event) => (
        <span 
          key={event.id}
          className={`key-${event.keyInfo.type}`}
          title={`${event.keyInfo.duration}ms`}
        >
          {event.keyInfo.key}
        </span>
      ))}
    </div>
  );
}