react-konami-code
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.2 • Public • Published

    react-konami-code GitHub stars

    Trigger an easter egg by pressing a sequence of keys. Also available as a custom hook.

    npm npm gzip size Travis Maintenance Known Vulnerabilities

    Install

    NPM

    npm i react-konami-code -S

    Example

    Clone this repo and run npm start in the example folder.

    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>
      )
    }

    TypeScript

    import * as React from 'react';
    import Konami from 'react-konami-code';
    
    export default class App extends React.Component {
      public render = () => (
        <Konami action={this.easterEgg}>
          {"Hey, I'm an Easter Egg! Look at me!"}
        </Konami>
      )
    
      private easterEgg = () => {
        alert('Hey, you typed the Konami Code!');
      }
    }

    Custom Hook

    Refer to the Using the custom Hook section.

    Component

    Children

    The content to be displayed should be passed as children inside the Konami component, and it will be wrapped inside a div. 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.

    Props

    action function

    Default: null

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

    className string

    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 Array<number>

    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 boolean

    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 function

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

    resetDelay number

    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 number

    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.

    Using the custom Hook

    If you want to call an action without rendering children or handling timeouts it's recommended to use the useKonami hook.

    import React from 'react';
    import { useKonami } from 'react-konami-code';
    const easterEgg = () => {
      alert('Hey, you typed the Konami Code!');
    }
    export default () => {
      useKonami(easterEgg);
      return <div />;
    };

    API

    useKonami(action, [options])

    action function

    Required

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

    options object

    • code

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

      An array with the sequence of keyCodes necessary to trigger the action. Refer to main code section for the keyCodes.

    License

    MIT

    Contact

    You can reach me on my Github or send an email to dev@vmarches.in.

    Install

    npm i react-konami-code

    DownloadsWeekly Downloads

    2,733

    Version

    2.2.2

    License

    MIT

    Unpacked Size

    16.4 kB

    Total Files

    12

    Last publish

    Collaborators

    • vmarchesin