https://github.com/wkovacs64/use-secret-code

Custom hook for adding cheat codes to your React app.
https://github.com/wkovacs64/use-secret-code

cheat-codes hacktoberfest hooks react react-hooks state-machine statechart xstate

Last synced: 1 day ago
JSON representation

Custom hook for adding cheat codes to your React app.

• Host: GitHub
• URL: https://github.com/wkovacs64/use-secret-code
• Owner: wKovacs64
• License: mit
• Created: 2020-03-27T18:53:27.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-12-27T20:10:02.000Z (4 days ago)
• Last Synced: 2024-12-30T03:09:29.213Z (1 day ago)
• Topics: cheat-codes, hacktoberfest, hooks, react, react-hooks, state-machine, statechart, xstate
• Language: TypeScript
• Homepage: https://use-secret-code.vercel.app
• Size: 13.6 MB
• Stars: 22
• Watchers: 4
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-secret-code

_Custom hook for adding cheat codes to your React app._

[![npm Version][npm-image]][npm-url] [![Build Status][ci-image]][ci-url]

[![Code Coverage][coverage-image]][coverage-url]

## Installation

```

npm install use-secret-code

```

## What is this?

This is a custom [React][react] [hook][hooks-intro] for adding "cheat codes" to your app. It will

listen for a given sequence of keystrokes and track whether the corresponding "cheat" is enabled or

disabled. You can then react (😏) accordingly (e.g. toggle a feature, pop an alert or notification,

etc.). Just having a little fun here with this throwback to [how we used to enter cheat codes in

video games][konami-code-video].

## Package Name

This package was originally called `use-cheat-code` but apparently the word "cheat" is against [npm

policies][npm-policies], so they denied my attempt to publish the package under that name and I was

forced to pick a new name. I went with `use-secret-code` (it's not great, but what else do you call

a cheat code?), but I still export `useCheatCode` as well as `useSecretCode`. They are the same

thing, but I will personally be importing `useCheatCode` in my own projects.

## Usage

```js

// import { useSecretCode } from 'use-secret-code'; // alternate

import { useCheatCode } from 'use-secret-code';

function CheatCodeExample() {

  const invulnerability = useCheatCode(['i', 'd', 'd', 'q', 'd']);

  return Invulnerability: {invulnerability ? 'enabled' : 'disabled'};

}

```

## Browser Support

This should work in all modern browsers, but you'll need to polyfill `Set` for use in IE11. See the

playground project in the [`example`][example] directory for one approach.

## License

This module is distributed under the [MIT License][license].

[npm-image]: https://img.shields.io/npm/v/use-secret-code.svg?style=for-the-badge

[npm-url]: https://www.npmjs.com/package/use-secret-code

[ci-image]:

  https://img.shields.io/github/actions/workflow/status/wKovacs64/use-secret-code/ci.yml?logo=github&style=for-the-badge

[ci-url]: https://github.com/wKovacs64/use-secret-code/actions?query=workflow%3Aci

[coverage-image]:

  https://img.shields.io/codecov/c/github/wKovacs64/use-secret-code/main.svg?style=for-the-badge

[coverage-url]: https://codecov.io/gh/wKovacs64/use-secret-code/branch/main

[license]: https://github.com/wKovacs64/use-secret-code/tree/main/LICENSE

[react]: https://reactjs.org/

[hooks-intro]: https://reactjs.org/docs/hooks-intro.html

[npm-policies]: https://www.npmjs.com/policies

[konami-code-video]: https://www.youtube.com/watch?v=j2gai5kT3eU

[example]: https://github.com/wKovacs64/use-secret-code/tree/main/example