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.
yarn add use-konamiimport useKonami from 'use-konami';
const Demo = () => {
useKonami({
onUnlock: () => console.log('Unlocked 30 extra lives'),
});
return (
<div>useKonami Demo</div>
);
};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.