@drookyn/react-easteregg NPM

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