Norwegian Parcel Mail

    @drookyn/react-easteregg

    1.1.0 • Public • Published

    react-easteregg

    Installation

    with npm:

    npm install --save @drookyn/react-easteregg

    with yarn:

    yarn add @drookyn/react-easteregg

    Basic Usage

    Just import the component and you are good to go. The default used sequence is the konami code ↑↑↓↓←→←→ba.

    import EasterEgg from 'react-easteregg';
    
    // ...
    
    render() {
      return (
        <EasterEgg>
          <span>It works!</span>
        </EasterEgg>
      );
    }
    
    // ...

    Advanced Usage

    import EasterEgg, { strToSequence } from 'react-easteregg';
    
    // ...
    
    state = { disabled: false };
    
    disableEasterEgg = () => {
      this.setState(() => ({ disabled: true }));
    }
    
    itWorks() {
      alert('It works!');
    }
    
    render() {
      const { disabled } = this.state;
      const sequence = strToSequence('myCustomSequence');
    
      return (
        <EasterEgg
          sequence={sequence}
          callback={this.itWorks}
          disabled={disabled}
        >
          <span onClick={this.disableEasterEgg}>It works!</span>
        </EasterEgg>
      );
    }
    
    // ...

    Props

    Key Value Default Required Description
    sequence array [38, 38, 40, 40, 37, 39, 37, 39, 66, 65] No An array of integer representing the sequence of keyCodes to listen to
    children node null No A component to render when the user successfully entered the code
    disable boolean false No A boolean to hide the easter egg
    target string|node window No A string (window|document) or node to bind the keyUp listener to
    timeout number null No A number representing the milliseconds after the easter egg will resets itself
    onShow function null No A callback triggered when the user successfully entered the code
    onReset function null No A callback triggered after the easter egg was reset
    onDisable function null No A callback triggered after the easter egg was disabled
    callback (deprecated) function null No A callback triggered when the user successfully entered the code

    Props passed to child

    Key Value Description
    resetEasterEgg function Resets the easter egg
    disableEasterEgg function Disables the easter egg

    Dependencies

    This project uses react-event-listener to bind event listeners.

    Code Style

    100% airbnb javascript (react) styleguide

    Commands

    • Test the component and helper functions

      npm test
    • Test the component and helper functions (with coverage)

      npm run test:coverage

    License

    MIT

    Install

    npm i @drookyn/react-easteregg

    DownloadsWeekly Downloads

    3

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    286 kB

    Total Files

    11

    Last publish

    Collaborators

    • drookyn