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