├── .npmignore ├── .gitignore ├── tsconfig.json ├── CONTRIBUTE.md ├── README.md ├── package.json ├── LICENSE └── Konami.tsx /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build/ 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "lib": ["es2017", "dom"], 6 | "declaration": true, 7 | "jsx": "react", 8 | "outDir": "./build", 9 | "strict": true, 10 | "esModuleInterop": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /CONTRIBUTE.md: -------------------------------------------------------------------------------- 1 | # react-konami 2 | 3 | ## How to build 4 | 5 | The `package.json` file as `build` script 6 | If you want to try to build build code you can run it. 7 | ``` 8 | npm run build 9 | ``` 10 | 11 | ## How to change version 12 | 13 | I recommand using the `npm version` it will build the project and 14 | use modify the version tag accordingly 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [react-konami](https://flovalence.github.io/react-konami) 2 | 3 | A simple react component to add easterEggs to your web applications 4 | [See demo page](https://flovalence.github.io/react-konami/demo.html) 5 | 6 | ## How to install 7 | `npm install --save react-konami` 8 | 9 | ## How to use 10 | Import the component, render it and you're all set 11 | 12 | If you use TypeScript the definition is contained in the package. 13 | 14 | ### Options 15 | | Type | Key | Description 16 | |------------ |---------------------|--------------------------------------------------------- 17 | | (func) | `easterEgg` | what happens when you enter the konami code (required) 18 | | (array) | `konami` | you can change the key combination (array of ascii keycodes) (optional) 19 | | (number) | `resetDelay` | time you have between keystroke to complete the konami code (optional) 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-konami", 3 | "version": "0.6.2", 4 | "description": "A simple component to add an easterEggs in your react web application", 5 | "main": "./build/Konami.js", 6 | "types": "./build/Konami.d.ts", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/FloValence/react-konami.git" 10 | }, 11 | "scripts": { 12 | "build": "rimraf build && tsc -p \"./\"", 13 | "watch": "tsc --watch -p \"./\"", 14 | "prepublishOnly": "npm prune && npm run build" 15 | }, 16 | "keywords": [ 17 | "konami", 18 | "code", 19 | "konamicode", 20 | "react", 21 | "component", 22 | "easter egg", 23 | "easter", 24 | "cheat code", 25 | "typescript" 26 | ], 27 | "homepage": "https://flovalence.github.io/react-konami", 28 | "author": "Florian Valence ", 29 | "license": "ISC", 30 | "peerDependencies": { 31 | "react": ">=15.4.0" 32 | }, 33 | "devDependencies": { 34 | "@types/react": "^15.4.0", 35 | "husky": "^0.11.9", 36 | "rimraf": "^2.5.4" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Jason 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /Konami.tsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | 3 | interface KonamiProps { 4 | easterEgg: () => void; 5 | konami: number[]; 6 | resetDelay: number; 7 | } 8 | 9 | export default class Konami extends Component { 10 | static defaultProps: Pick = { 11 | resetDelay: 2000, 12 | konami: [38, 38, 40, 40, 37, 39, 37, 39, 66, 65], 13 | } 14 | 15 | n = 0 16 | delayId = 0 17 | 18 | componentDidMount() { 19 | document.addEventListener('keydown', this.onKeydown) 20 | } 21 | 22 | componentDidUpdate(prevProps: KonamiProps) { 23 | const { resetDelay = 0, konami = [] } = prevProps 24 | const resetDelayHasChanged = resetDelay !== this.props.resetDelay 25 | if (resetDelayHasChanged && resetDelay <= 0) { 26 | this.delayOff() 27 | } else if (resetDelayHasChanged) { 28 | this.delayOff() 29 | this.delayOn() 30 | } 31 | if (konami.join('') !== (this.props.konami || []).join('')) { 32 | this.resetN() 33 | this.delayOff() 34 | } 35 | } 36 | 37 | componentWillUnmount() { 38 | document.removeEventListener('keydown', this.onKeydown) 39 | this.delayOff() 40 | } 41 | 42 | delayOff() { 43 | if (this.delayId) clearTimeout(this.delayId) 44 | } 45 | 46 | delayOn() { 47 | if ((this.props.resetDelay || 0) <= 0) return 48 | this.delayOff() 49 | this.delayId = setTimeout(() => this.resetN(), this.props.resetDelay) 50 | } 51 | 52 | resetN(keyCode?: number) { 53 | if (!keyCode) { 54 | this.n = 0 55 | return 56 | } 57 | 58 | const { konami = [] } = this.props 59 | 60 | let count = 1 61 | while (this.n-- > 0 && konami[this.n] === keyCode) 62 | count++ 63 | this.n = 0 64 | while (count-- > 0 && konami[this.n] === keyCode) 65 | this.n++ 66 | } 67 | 68 | onKeydown = (e: KeyboardEvent) => { 69 | const { konami = [], easterEgg } = this.props 70 | 71 | if (e.keyCode === konami[this.n]) { 72 | this.n++; 73 | this.delayOn(); 74 | if (this.n === konami.length) { 75 | easterEgg() 76 | this.resetN() 77 | this.delayOff() 78 | return 79 | } 80 | } else { 81 | this.resetN(e.keyCode) 82 | this.delayOff() 83 | } 84 | } 85 | 86 | render() { 87 | return null 88 | } 89 | } 90 | --------------------------------------------------------------------------------