react-konami-code
v2.3.0
Published
Trigger an easter egg by pressing a sequence of keys. Available as a component or a custom hook. Supports timeout and input debounce/reset.
Downloads
18,595
Maintainers
Readme
react-konami-code
Trigger an easter egg by pressing a sequence of keys. Also available as a custom hook.
Install
npm i react-konami-code -S
Example
Clone this repo and run npm start
in the example
folder.
Usage
CommonJS Module (Webpack or Browserify)
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 = () => (
<Konami action={this.easterEgg}>
{"Hey, I'm an Easter Egg! Look at me!"}
</Konami>
)
}
TypeScript
import * as React from 'react';
import Konami from 'react-konami-code';
export default class App extends React.Component {
public render = () => (
<Konami action={this.easterEgg}>
{"Hey, I'm an Easter Egg! Look at me!"}
</Konami>
)
private easterEgg = () => {
alert('Hey, you typed the Konami Code!');
}
}
Custom Hook
Refer to the Using the custom Hook section.
Component
Children
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 function
Default: null
The callback action that should fire when the code
is input.
className string
Default: ""
CSS classes can be applied to the div wrapping your secret content. By default the div will always have the konami
className.
<Konami className="myclass">
{"Hey, I'm an Easter Egg!"}
</Konami>
will result in:
<div className="konami myclass">
Hey, I'm an Easter Egg!
</div>
code Array<number>
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 A
You can find the keyCodes for each character here.
disabled boolean
Default: false
If 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
.
onTimeout function
The callback to fire when the timeout
is finished, if any.
resetDelay number
Default: 1000
The 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.
timeout number
Default: null
The 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.
import React from 'react';
import { useKonami } from 'react-konami-code';
const easterEgg = () => {
alert('Hey, you typed the Konami Code!');
}
export default () => {
useKonami(easterEgg);
return <div />;
};
API
useKonami(action, [options])
action function
Required
The callback action that should fire when the code
is input.
options 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 maincode
section for the keyCodes.
License
Contact
You can reach me on my Github or send an email to [email protected].