{"id":18406539,"url":"https://github.com/vmarchesin/react-konami-code","last_synced_at":"2025-04-07T08:32:25.986Z","repository":{"id":39917105,"uuid":"129557805","full_name":"vmarchesin/react-konami-code","owner":"vmarchesin","description":"Trigger an easter egg by pressing a sequence of keys.","archived":false,"fork":false,"pushed_at":"2022-05-21T18:12:52.000Z","size":1526,"stargazers_count":63,"open_issues_count":1,"forks_count":12,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T18:55:09.615Z","etag":null,"topics":["easter-egg","konamicode","npm","react"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vmarchesin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-14T22:04:49.000Z","updated_at":"2025-01-10T10:29:47.000Z","dependencies_parsed_at":"2022-09-05T17:10:45.149Z","dependency_job_id":null,"html_url":"https://github.com/vmarchesin/react-konami-code","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmarchesin%2Freact-konami-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmarchesin%2Freact-konami-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmarchesin%2Freact-konami-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmarchesin%2Freact-konami-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vmarchesin","download_url":"https://codeload.github.com/vmarchesin/react-konami-code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247620437,"owners_count":20968212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["easter-egg","konamicode","npm","react"],"created_at":"2024-11-06T03:09:32.286Z","updated_at":"2025-04-07T08:32:25.561Z","avatar_url":"https://github.com/vmarchesin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-konami-code [![GitHub stars](https://img.shields.io/github/stars/vmarchesin/react-konami-code.svg?style=social\u0026label=Star\u0026maxAge=2592000)](https://gitHub.com/vmarchesin/react-konami-code/)\n\nTrigger an easter egg by pressing a sequence of keys. Also available as a custom hook.\n\n[![npm](https://img.shields.io/npm/v/react-konami-code.svg)]()\n[![npm](https://img.shields.io/npm/dt/react-konami-code.svg)]()\n[![gzip size](http://img.badgesize.io/https://npmcdn.com/react-konami-code/dist/Konami.js?compression=gzip)]()\n![Travis](https://travis-ci.org/vmarchesin/react-konami-code.svg?branch=master)\n![Maintenance](https://img.shields.io/maintenance/yes/2022.svg)\n[![Known Vulnerabilities](https://snyk.io/test/github/vmarchesin/react-konami-code/badge.svg)](https://snyk.io/test/github/vmarchesin/react-konami-code)\n\n## Install\n\n[![NPM](https://nodei.co/npm/react-konami-code.png)](https://www.npmjs.com/package/react-konami-code)\n\n```shell\nnpm i react-konami-code -S\n```\n\n## Example\nClone this repo and run `npm start` in the `example` folder.\n\n## Usage\n### CommonJS Module (Webpack or Browserify)\n\n```jsx\nimport React from 'react';\nimport Konami from 'react-konami-code';\n\nexport default class App extends React.Component {\n  easterEgg = () =\u003e {\n    alert('Hey, you typed the Konami Code!');\n  }\n\n  render = () =\u003e (\n    \u003cKonami action={this.easterEgg}\u003e\n      {\"Hey, I'm an Easter Egg! Look at me!\"}\n    \u003c/Konami\u003e\n  )\n}\n```\n\n### TypeScript\n\n```tsx\nimport * as React from 'react';\nimport Konami from 'react-konami-code';\n\nexport default class App extends React.Component {\n  public render = () =\u003e (\n    \u003cKonami action={this.easterEgg}\u003e\n      {\"Hey, I'm an Easter Egg! Look at me!\"}\n    \u003c/Konami\u003e\n  )\n\n  private easterEgg = () =\u003e {\n    alert('Hey, you typed the Konami Code!');\n  }\n}\n```\n\n### Custom Hook\n\nRefer to the [Using the custom Hook](#hooks) section.\n\n## Component\n\n### Children\n\nThe 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.\n\nYou can pass `children` and [`action`](#action) at the same time to display some content and fire a secondary action.\n\n## Props\n* [`action`](#action)\n* [`className`](#className)\n* [`code`](#code)\n* [`disabled`](#disabled)\n* [`onTimeout`](#onTimeout)\n* [`resetDelay`](#resetDelay)\n* [`timeout`](#timeout)\n\n\u003ca name=\"action\"\u003e\u003c/a\u003e\n#### action `function`\n*Default:* `null`\n\nThe callback action that should fire when the [`code`](#code) is input.\n\n\u003ca name=\"className\"\u003e\u003c/a\u003e\n#### className `string`\n*Default:* `\"\"`\n\nCSS classes can be applied to the div wrapping your secret content. By default the div will always have the `konami` className.\n\n```jsx\n\u003cKonami className=\"myclass\"\u003e\n  {\"Hey, I'm an Easter Egg!\"}\n\u003c/Konami\u003e\n```\nwill result in:\n```html\n\u003cdiv className=\"konami myclass\"\u003e\n  Hey, I'm an Easter Egg!\n\u003c/div\u003e\n```\n\n\u003ca name=\"code\"\u003e\u003c/a\u003e\n#### code `Array\u003cnumber\u003e`\n*Default:* `[38,38,40,40,37,39,37,39,66,65]`\n\nAn array with the sequence of keyCodes necessary to trigger the [`action`](#action). The default code is the Konami Code: `↑ ↑ ↓ ↓ ← → ← → B A`\n\nYou can find the keyCodes for each character [here](https://www.w3.org/2002/09/tests/keys.html).\n\n\u003ca name=\"disabled\"\u003e\u003c/a\u003e\n#### disabled `boolean`\n*Default:* `false`\n\nIf 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`.\n\n\u003ca name=\"onTimeout\"\u003e\u003c/a\u003e\n#### onTimeout `function`\n\nThe callback to fire when the [`timeout`](#timeout) is finished, if any.\n\n\u003ca name=\"resetDelay\"\u003e\u003c/a\u003e\n#### resetDelay `number`\n*Default:* `1000`\n\nThe 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.\n\n\u003ca name=\"timeout\"\u003e\u003c/a\u003e\n#### timeout `number`\n*Default:* `null`\n\nThe 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.\n\n\u003ca name=\"hooks\"\u003e\u003c/a\u003e\n## Using the custom Hook\n\nIf you want to call an action without rendering children or handling timeouts it's recommended to use the `useKonami` hook.\n\n```jsx\nimport React from 'react';\nimport { useKonami } from 'react-konami-code';\nconst easterEgg = () =\u003e {\n  alert('Hey, you typed the Konami Code!');\n}\nexport default () =\u003e {\n  useKonami(easterEgg);\n  return \u003cdiv /\u003e;\n};\n```\n\n### API\n`useKonami(action, [options])`\n\n\u003ca name=\"hooks-action\"\u003e\u003c/a\u003e\n#### action `function`\n*Required*\n\nThe callback action that should fire when the [`code`](#hooks-options) is input.\n\n\u003ca name=\"hooks-options\"\u003e\u003c/a\u003e\n#### options `object`\n  - code\n\n    *Default:* `[38,38,40,40,37,39,37,39,66,65]`\n\n    An array with the sequence of keyCodes necessary to trigger the [`action`](#hooks-action). Refer to main [`code`](#code) section for the keyCodes.\n\n## License\n\n[MIT](https://github.com/vmarchesin/react-konami-code/blob/master/LICENSE)\n\n## Contact\n\nYou can reach me on my [Github](https://github.com/vmarchesin) or send an email to [dev@vmarches.in](mailto:dev@vmarches.in).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvmarchesin%2Freact-konami-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvmarchesin%2Freact-konami-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvmarchesin%2Freact-konami-code/lists"}