Package Exports

react-konami-code

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-konami-code) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-konami-code

Trigger an easter egg by pressing a sequence of keys.

Install

npm i react-konami-code -S

Live Example

My personal webpage

Usage

CommonJS Module (Webpack or Browserify)

import React from 'react'
import Konami from 'react-konami-code'

export default class App extends React.Component {
  easterEgg = () => { 
    alert("Hey, you typed the Konami Code!")
  }

  render = () => (
    <Konami action={this.easterEgg}>
      Hey, I'm an Easter Egg! Look at me!
    </Konami>;
  )
}

Children

The content to be displayed should be passed as children inside the Konami component. You can however not pass any children, and then just use the action callback to fire your easter egg.

You can pass children and action at the same time to display some content and fire a secondary action.

action

Default: null

The callback action that should fire when the code is input.

className

Default: ""

CSS classes can be applied to the div wrapping your secret content. By default the div will always have the konami className.

<Konami className="myclass">
  {"Hey, I'm an Easter Egg!"}
</Konami>

will result in:

<div className="konami myclass">
  Hey, I'm an Easter Egg!
</div>

code

Default: [38,38,40,40,37,39,37,39,66,65]

An array with the sequence of keyCodes necessary to trigger the action. The default code is the Konami Code: ↑ ↑ ↓ ↓ ← → ← → B A

You can find the keyCodes for each character here.

disabled

Default: false

If the trigger should be disabled or not. This is dynamic and you can enable/disable at will. The action callback will only trigger when disabled == false.

onTimeout

The callback to fire when the timeout is finished, if any.

resetDelay

Default: 1000

The delay interval on which you need to start the input again. If you set it to 0 it will never reset the user input. Value should be in ms.

timeout

Default: null

The timeout to hide the easter egg. When the timeout is finished it will set display: none to the wrapping div and will fire onTimeout. By default it runs forever. Value should be in ms.

License

MIT