Having fun with React Hooks

Having fun with React Hooks

Having fun with React Hooks. The hook uses React’s useEffect hook to register and unregister a keydown event listener on the window or supplied target element. ReactTraining.com will give a joint presentation covering hooks and some of the concepts from their training.

I was recently tasked with creating an Easter Egg in our application to launch a troubleshooting menu. In the past, I’ve done this by clicking on a sequence of items or on what appears to be a disabled icon a few times. However, this time I decided to try a different approach and implement a React hook that listens for the  Konami Code input on the keyboard. Thus, the useKonami hook was born. Here are the highlights:

  • A hook that listens for a keyboard sequence (default is the Konami Code) on the window or a target element, and then calls an onUnlock callback after the sequence has been successfully entered by the user
  • Zero external dependencies
  • Built using standard  React Hooks API’s
  • Optimized to avoid unnecessary rerenders
  • Open source on GitHub

How does it work?

The hook uses React’s useEffect hook to register and unregister a keydown event listener on the window or supplied target element. It then receives the keyboard down presses and compares them against the unlock sequence. Upon successfully pressing the sequence, the hook then calls the supplied onUnlock callback. If the sequence is entered incorrectly, then the optional onReset callback will be called. There is also an optional onKeyPress callback that is invoked each time a key in the sequence is successfully pressed.

konami-code react-hook easter-egg react typescript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? Also, we will see the react hooks example.

How to Build Meme Generator with React, React Hooks and TypeScript

The best way to learn something is by doing. It works even better if it means working on something for fun. So, how about learning about React, React hooks and TypeScript by building your own meme generator? This tutorial will show you how to do it.

Validating React Forms With React-Hook-Form

In this article we will learn how to Validating React Forms With React-Hook-Form . Validating inputs is very often required. For example, when you want to make sure two passwords inputs are the same, an email input should in fact be an email or that the input is not too long

Hooks, Hooks, Hooks!

Hooks are functions, provided by React (and completely opt-in, not required), that allows you to “hook into” React features from functional components. So you can continue to use functional components, which are inherently simpler and less bloated, and access state.