react-konamikey

react-konamikey

Trigger a callback function on anything with a sequence of key presses.

Install

# requires react@>=16
yarn add react-konamikey

Usage

import * as React from 'react'
import Konami from 'react-konamikey'
// const Konami = require('react-konamikey').default

attach to an element (using refFn)

<Konami
  element={({ refFn }) => (
    <input type="text" placeholder="gamma" ref={refFn} />
  )}
  payload={() => console.log('KONAMI!!!')}
  sequence={['g', 'a', 'm', 'm', 'a']}
/>

attach to document

<Konami
  element={document}
  payload={() => console.log('KONAMI!!!')}
  sequence={['a', 'b', 'c']}
>
  <div>hello world</div>
</Konami>

live example

https://codesandbox.io/s/blissful-pare-c7hvb

Props

element

Type: HTMLElement | Function

An HTMLElement, document, or function to attach keydown event handlers to.

payload

Type: Function

A payload function to execute, once the Konami sequence has been fulfilled.

sequence

Type: Array [required]

An array of strings representing key names.

License

MIT