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