use-konami

A zero dependency React hook that listens for a sequence of key presses to unlock a feature. This is usually referred to as an easter egg. The default sequence is commonly known as the [Konami Code][link-konami-code-wiki]: ↑ ↑ ↓ ↓ ← → ← → a b.

Usage no npm install needed!

<script type="module">
  import useKonami from 'https://cdn.skypack.dev/use-konami';
</script>

README

use-konami

A zero dependency React hook that listens for a sequence of key presses to unlock a feature. This is usually referred to as an easter egg. The default sequence is commonly known as the Konami Code: ↑ ↑ ↓ ↓ ← → ← → a b.

NPM Version NPM Total Downloads License Build Status Coverage Demo

Installation

yarn add use-konami

Usage

import useKonami from 'use-konami';

const Demo = () => {
  useKonami({
    onUnlock: () => console.log('Unlocked 30 extra lives'),
  });

  return (
    <div>useKonami Demo</div>
  );
};

Check out the demo

Options

onUnlock: (event: KeyboardEvent) => void The callback when the sequence has been completed and the secret unlocked

sequence: string[] An optional key sequence to use instead of the default Konami Code. This should be an array of strings that correspond to key events.

onReset: (distance: number, event: KeyboardEvent) => void An optional callback when a portion of the sequence has been completed, but reset before being unlocked. The callback is invoked with total distance through the sequence. For example, it would be invoked with 3 if the they successfully pressed the first 3 keys in the sequence before pressing an incorrect key.

onKeyPress: (key: string, index: number, event: KeyboardEvent) => void An optional callback when a key in the sequence is pressed.

target: HTMLElement An optional target element to listen to events. The default is the window object.