react-easter-egg v0.1.1

react-easter-egg

Installation

npm install react-easter-egg --save

## Props | Key | Value | Default | Required | Description | |-----------|----------|:-----------:|:--------:|-----------------------------------------------------------------| | callback | function | undefined | No | A callback triggered when the user has entered the code | | className | string | '' | No | A class to assign to the wrapper div when a child is specified | | disable | boolean | false | No | If set to true, the easter egg will be disabled | | code | array | Konami code | No | An array of integer representing the keyboard sequence to catch |

Usage

First you need to import the component :

import EasterEgg from 'react-easter-egg';

Display sub component

<EasterEgg>
    <p>Text to display when the code is entered</p>
</EasterEgg>

Trigger callback

<EasterEgg callback={() => { alert('Hello world !'); }} />

Examples

Material ui Dialog

import React from 'react';
import Dialog from 'material-ui/Dialog';
import EasterEgg from 'react-easter-egg';

export class KonamiCodeDialog extends React.Component {

    state = { open: false };

    handleOpen = () => {
        this.setState({ open: true });
    };

    handleClose = () => {
        this.setState({ open: false });
    };

    render() {
        return <EasterEgg callback={this.handleOpen}>
            <Dialog
                modal={false}
                open={this.state.open}
                onRequestClose={this.handleClose}>

                <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameBorder="0" allowFullScreen></iframe>

            </Dialog>
        </EasterEgg>
    }

}

export default KonamiCodeDialog;

License

MIT