@drookyn/react-easteregg

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