use-kanomi-code v1.0.0

use-kanomi-code

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

Installation

yarn add use-kanomi-code

Usage

import useKanomiCode from 'use-kanomi-code';

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

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

Options

onUnlock: () => 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 Kanomi Code. This should be an array of strings that correspond to key events.

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

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