https://github.com/devlato/react-easter
Quite convenient and flexible React component for adding easter eggs to your React app
https://github.com/devlato/react-easter
easter easter-egg hotkey hotkeys javascript konami konamicode react rodney shortcut shortcuts timeout
Last synced: 9 months ago
JSON representation
Quite convenient and flexible React component for adding easter eggs to your React app
- Host: GitHub
- URL: https://github.com/devlato/react-easter
- Owner: devlato
- Created: 2017-03-02T01:05:53.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-12-09T00:31:29.000Z (about 1 year ago)
- Last Synced: 2025-03-24T16:02:41.918Z (10 months ago)
- Topics: easter, easter-egg, hotkey, hotkeys, javascript, konami, konamicode, react, rodney, shortcut, shortcuts, timeout
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 14
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-easter
Easily add Easter eggs to your React app
[](https://travis-ci.org/devlato/react-easter)
[](https://coveralls.io/github/devlato/react-easter?branch=master)
[](https://codeclimate.com/github/devlato/react-easter)
[](https://codeclimate.com/github/devlato/react-easter)
[](https://badge.fury.io/js/react-easter)
## Installation
With npm:
```sh
$ npm install --save-dev react-easter
```
Or with Yarn:
```sh
$ yarn add react-easter
```
## Usage
The usage is very simple, there is just a couple of props to pass.
```jsx
const EasterEgg = require('react-easter');
// ...
render() {
return (
{/* Your easter egg JSX goes here */}
);
}
```
You can add `react-easter` anywhere in your component hierarchy, because it adds a global
keyboard events listener and doesn't stops any event bubbling.
For example:
```jsx
const EasterEgg = require('react-easter');
export default class YourComponent extends React.Component {
render() {
const konamiCode = [
'arrowup',
'arrowup',
'arrowdown',
'arrowdown',
'arrowleft',
'arrowright',
'arrowleft',
'arrowright',
'b',
'a',
'enter'
];
return (
);
}
}
```
## Props
* `keys` – Just array of string representing each button to be pressed;
* `simultaneous` – Set this prop if user should press buttons all together;
* `timeout` – Amount of time in milliseconds while easter egg is displayed.
## Supported keys
All alphabetic letters and numbers could be passed as is, i.e. letter "a" is just "a".
If you use `simultaneous` mode and you have the `Shift` button in your hotkey combination,
please set the unmodified buttons.
For example, to have a `Shift+!` hotkey, you should pass `keys={["shift", "1"]}`,
because "Shift" and "1" pressed together produce "!".
## Dependencies
Project uses [react-shortcut](https://www.npmjs.com/package/react-shortcut) to handle keyboard shortcuts.
## Test coverage
Library has ~100% test coverage:
```sh
$ npm run test:coverage
> react-easter@1.0.0 test:coverage ~/projects/react-easter
> NODE_ENV=test jest --coverage --no-cache --config .jestrc
PASS test/Component.js
✓ Should render (16ms)
✓ Should handle keys sequently without timeout (1032ms)
✓ Should handle keys sequently with timeout (1011ms)
--------------|----------|----------|----------|----------|----------------|
File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines |
--------------|----------|----------|----------|----------|----------------|
All files | 100 | 77.78 | 100 | 100 | |
Component.js | 100 | 77.78 | 100 | 100 | |
--------------|----------|----------|----------|----------|----------------|
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 3.831s
Ran all test suites.
```
## Code style
Library is 100% compatible with [airbnb-base](https://www.npmjs.com/package/eslint-config-airbnb-base) for ES5.
## Available commands
Library has the following commands available:
* Run the tests:
```
$ npm test
```
* Run the tests and display test coverage:
```
$ npm run test:coverage
```
* Run the linter:
```
$ npm run lint
```
## Build
No building required, library is implemented with ES5 React syntax for better compatibility and shipped as is.
## License
Library is shipped "as is" under MIT License.
## Contributing
Feel free to contribute but don't forget to test everything properly.
[](https://nodei.co/npm/react-easter/)