Trigger an easter egg by pressing a sequence of keys. Available as a component or a custom hook. Supports timeout and input debounce/reset.
npm install react-konami-codeTrigger an easter egg by pressing a sequence of keys. Also available as a custom hook.
![npm]()
![npm]()
![gzip size]()
!Travis
!Maintenance


``shell`
npm i react-konami-code -S
in the example folder.Usage
$3
`jsx
import React from 'react';
import Konami from 'react-konami-code';export default class App extends React.Component {
easterEgg = () => {
alert('Hey, you typed the Konami Code!');
}
render = () => (
{"Hey, I'm an Easter Egg! Look at me!"}
)
}
`$3
`tsx
import * as React from 'react';
import Konami from 'react-konami-code';export default class App extends React.Component {
public render = () => (
{"Hey, I'm an Easter Egg! Look at me!"}
)
private easterEgg = () => {
alert('Hey, you typed the Konami Code!');
}
}
`$3
Refer to the Using the custom Hook section.
Component
$3
The content to be displayed should be passed as
children inside the Konami component, and it will be wrapped inside a div. You can however not pass any children, and then just use the action callback to fire your easter egg.You can pass
children and action at the same time to display some content and fire a secondary action.Props
* action
* className
* code
* disabled
* onTimeout
* resetDelay
* timeoutfunction
Default: nullcode is input.string
Default: ""CSS classes can be applied to the div wrapping your secret content. By default the div will always have the
konami className.`jsx
{"Hey, I'm an Easter Egg!"}
`
will result in:
`html
Hey, I'm an Easter Egg!
`Array
Default: [38,38,40,40,37,39,37,39,66,65]An array with the sequence of keyCodes necessary to trigger the
action. The default code is the Konami Code: ↑ ↑ ↓ ↓ ← → ← → B AYou can find the keyCodes for each character here.
boolean
Default: falseIf the trigger should be disabled or not. This is dynamic and you can enable/disable at will. The
action callback will only trigger when disabled == false.functiontimeout is finished, if any.number
Default: 1000The delay interval on which you need to start the input again. If you set it to
0 it will never reset the user input. Value should be in ms.number
Default: nullThe timeout to hide the easter egg. When the timeout is finished it will set
display: none to the wrapping div and will fire onTimeout. By default it runs forever. Value should be in ms.Using the custom Hook
If you want to call an action without rendering children or handling timeouts it's recommended to use the
useKonami hook.`jsx
import React from 'react';
import { useKonami } from 'react-konami-code';
const easterEgg = () => {
alert('Hey, you typed the Konami Code!');
}
export default () => {
useKonami(easterEgg);
return ;
};
`$3
useKonami(action, [options])function
Requiredcode is input.object
- code Default:
[38,38,40,40,37,39,37,39,66,65] An array with the sequence of keyCodes necessary to trigger the
action. Refer to main code` section for the keyCodes.You can reach me on my Github or send an email to dev@vmarches.in.