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: ↑
↑
↓
↓
←
→
←
→
b
a
.
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>
);
};
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.