React Konami Code

A React implementation of the infamous Konami Code detector, ported from konami-lit. This project includes a custom React hook (useKonami) for detecting keyboard input sequences, along with a demo component.

Features

• useKonami Hook: Detect the Konami Code or custom key sequences
• Configurable: Custom sequences, timeout duration, and event callbacks
• TypeScript: Full TypeScript support with type definitions
• Interactive Demo: Visual feedback with progress tracking and animations

Getting Started

Install Dependencies

npm install

Run Development Server

npm run dev

Build for Production

npm run build

Usage

Basic Usage

import { useKonami } from './hooks/useKonami';

function MyComponent() {
  const konami = useKonami({
    onActivated: () => {
      console.log('Konami Code activated!');
    }
  });

  return (
    <div>
      <p>Progress: {konami.progress} / {konami.total}</p>
      <p>Next key: {konami.nextExpectedKey}</p>
    </div>
  );
}

Custom Sequence

const konami = useKonami({
  code: ['a', 'b', 'c'],
  timeout: 3000,
  onActivated: () => console.log('Custom sequence activated!'),
  onProgress: (position, total) => console.log(`${position}/${total}`),
  onReset: () => console.log('Sequence reset')
});

Manual Reset & Conditional Activation

function MyComponent() {
  const [enabled, setEnabled] = useState(true);
  const konami = useKonami({ enabled });

  return (
    <div>
      <button onClick={() => setEnabled(!enabled)}>
        {enabled ? 'Disable' : 'Enable'} Konami Code
      </button>
      {konami.activated && (
        <div>
          <p>Success!</p>
          <button onClick={konami.reset}>Try Again</button>
        </div>
      )}
    </div>
  );
}

Hook Options

• code?: string[] - Custom key sequence (default: Konami Code)
• timeout?: number - Milliseconds between key presses before reset (default: 2000)
• enabled?: boolean - Whether the hook should listen for keyboard input (default: true)
• onActivated?: () => void - Callback when sequence is completed
• onProgress?: (position: number, total: number) => void - Callback on each correct key
• onReset?: () => void - Callback when sequence is reset

Hook Return Value

• progress: number - Current position in the sequence
• total: number - Total length of the sequence
• nextExpectedKey: string - The next key needed in the sequence
• activated: boolean - Whether the sequence was completed
• reset: () => void - Manually reset the sequence and activated state

Default Konami Code

↑ ↑ ↓ ↓ ← → ← → B A

(ArrowUp, ArrowUp, ArrowDown, ArrowDown, ArrowLeft, ArrowRight, ArrowLeft, ArrowRight, b, a)

License

MIT