use-secret-code

use-secret-code

Custom hook for adding cheat codes to your React app.

Installation

npm install use-secret-code

What is this?

This is a custom React hook 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.

Package Name

This package was originally called use-cheat-code but apparently the word "cheat" is against 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

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

function CheatCodeExample() {
  const invulnerability = useCheatCode(['i', 'd', 'd', 'q', 'd']);
  return (
    <span>Invulnerability: {invulnerability ? 'enabled' : 'disabled'}</span>
  );
}

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 directory for one approach.

License

This module is distributed under the MIT License.

Changelog

1.0.82

Patch Changes

• #167 d908dfa Thanks @renovate! - Update XState to v5, which should reduce the package size.