https://github.com/devlato/react-goatse
Extremely useful React component that effortlessly adds the famous easter egg to your React app and is highly recommended for all projects on the modern web
https://github.com/devlato/react-goatse
easter easter-egg goatse hotkey hotkeys javascript konami konamicode react rodney shortcut shortcuts timeout
Last synced: 2 months ago
JSON representation
Extremely useful React component that effortlessly adds the famous easter egg to your React app and is highly recommended for all projects on the modern web
- Host: GitHub
- URL: https://github.com/devlato/react-goatse
- Owner: devlato
- Created: 2017-03-15T01:24:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-15T01:36:25.000Z (over 8 years ago)
- Last Synced: 2025-07-13T01:25:19.531Z (3 months ago)
- Topics: easter, easter-egg, goatse, hotkey, hotkeys, javascript, konami, konamicode, react, rodney, shortcut, shortcuts, timeout
- Language: JavaScript
- Homepage:
- Size: 37.1 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-goatse
Easily add [Goatse](http://goatse.ru/) easter egg to your React app
[](https://travis-ci.org/devlato/react-goatse)
[](https://coveralls.io/github/devlato/react-goatse?branch=master)
[](https://codeclimate.com/github/devlato/react-goatse)
[](https://codeclimate.com/github/devlato/react-goatse)
[](https://badge.fury.io/js/react-goatse)
## Installation
With npm:
```sh
$ npm install --save-dev react-goatse
```
Or with Yarn:
```sh
$ yarn add react-goatse
```
## Usage
The usage is very simple, just pass a couple of optional props to Goatse component:
```jsx
const Goatse = require('react-goatse');
// ...
render() {
return (
);
}
```
You can add `react-goatse` anywhere in your component hierarchy, because it adds a global
keyboard events listener and doesn't stops any event bubbling.
For example:
```jsx
const Goatse = require('react-goatse');
export default class YourComponent extends React.Component {
render() {
// When user types 'goatse' somewhere using your React app,
// show Goatse easter egg.
const shortcutKeys = ['g', 'o', 'a', 't', 's', 'e'];
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 goatse should be 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-easter](https://www.npmjs.com/package/react-easter) to easily add an easter egg.
## Test coverage
Library has ~100% test coverage:
```sh
$ npm run test:coverage
> react-goatse@1.0.0 test:coverage ~/projects/react-goatse
> NODE_ENV=test jest --coverage --no-cache --config .jestrc
PASS test/Component.js
✓ Should render (9ms)
✓ Should render goatse with timeout (214ms)
✓ Should render goatse without timeout (206ms)
✓ Should render goatse with timeout simultaneously (206ms)
✓ Should render goatse without timeout simultaneously (203ms)
--------------|----------|----------|----------|----------|----------------|
File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines |
--------------|----------|----------|----------|----------|----------------|
All files | 100 | 50 | 100 | 100 | |
Component.js | 100 | 50 | 100 | 100 | |
--------------|----------|----------|----------|----------|----------------|
Test Suites: 1 passed, 1 total
Tests: 5 passed, 5 total
Snapshots: 0 total
Time: 2.321s
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-goatse/)