Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vmarchesin/react-konami-code
Trigger an easter egg by pressing a sequence of keys.
https://github.com/vmarchesin/react-konami-code
easter-egg konamicode npm react
Last synced: about 2 months ago
JSON representation
Trigger an easter egg by pressing a sequence of keys.
- Host: GitHub
- URL: https://github.com/vmarchesin/react-konami-code
- Owner: vmarchesin
- License: mit
- Created: 2018-04-14T22:04:49.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-05-21T18:12:52.000Z (over 2 years ago)
- Last Synced: 2024-10-14T03:49:21.308Z (2 months ago)
- Topics: easter-egg, konamicode, npm, react
- Language: TypeScript
- Size: 1.46 MB
- Stars: 62
- Watchers: 1
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-konami-code [](https://gitHub.com/vmarchesin/react-konami-code/)
Trigger an easter egg by pressing a sequence of keys. Also available as a custom hook.
[]()
[]()
[]()
[](https://snyk.io/test/github/vmarchesin/react-konami-code)
## Install
[](https://www.npmjs.com/package/react-konami-code)
```shell
npm i react-konami-code -S
```
## Example
Clone this repo and run `npm start` in the `example` folder.
## Usage
### CommonJS Module (Webpack or Browserify)
```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!"}
)
}
```
### TypeScript
```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!');
}
}
```
### Custom Hook
Refer to the [Using the custom Hook](#hooks) 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`](#action) callback to fire your easter egg.
You can pass `children` and [`action`](#action) at the same time to display some content and fire a secondary action.
## Props
* [`action`](#action)
* [`className`](#className)
* [`code`](#code)
* [`disabled`](#disabled)
* [`onTimeout`](#onTimeout)
* [`resetDelay`](#resetDelay)
* [`timeout`](#timeout)
#### action `function`
*Default:* `null`
The callback action that should fire when the [`code`](#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.
```jsx
{"Hey, I'm an Easter Egg!"}
```
will result in:
```html
Hey, I'm an Easter Egg!
```
#### code `Array`
*Default:* `[38,38,40,40,37,39,37,39,66,65]`
An array with the sequence of keyCodes necessary to trigger the [`action`](#action). The default code is the Konami Code: `↑ ↑ ↓ ↓ ← → ← → B A`
You can find the keyCodes for each character [here](https://www.w3.org/2002/09/tests/keys.html).
#### disabled `boolean`
*Default:* `false`
If the trigger should be disabled or not. This is dynamic and you can enable/disable at will. The [`action`](#action) callback will only trigger when `disabled == false`.
The callback to fire when the [`timeout`](#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`](#onTimeout). By default it runs forever. Value should be in ms.
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
;
};
```
### API
`useKonami(action, [options])`
#### action `function`
*Required*
The callback action that should fire when the [`code`](#hooks-options) is input.
*Default:* `[38,38,40,40,37,39,37,39,66,65]`
An array with the sequence of keyCodes necessary to trigger the [`action`](#hooks-action). Refer to main [`code`](#code) section for the keyCodes.
## License
[MIT](https://github.com/vmarchesin/react-konami-code/blob/master/LICENSE)
## Contact
You can reach me on my [Github](https://github.com/vmarchesin) or send an email to [[email protected]](mailto:[email protected]).