DEV Community

Cover image for Easter eggs using React Rooks
Anish De for ByteSlash

Posted on • Updated on • Originally published at blog.anishde.dev

Easter eggs using React Rooks

I stumbled upon this great React Hooks library called Rooks recently and it has got a lot to offer. We all have discovered various Easter eggs in various apps and sites. It can range anywhere from stumbling upon a Rick-roll when you click a button a certain number of times or enjoying playing snake when you press a hidden button on a 404 page.

Ok, so let us start making an Easter egg 🥚

An alert when you press a certain key combination

Rooks provides us with a very useful useKeys hook. With this, we can trigger an action whenever a certain key combination is pressed. For this example whenever the keys Q, W, E, R, T, and Y are pressed, all together, an alert will be triggered saying the key combination was pressed. This is a simple example and hence a great place to start

Firstly we need to create a react project (you can use Gatsby, NextJS, etc as well as long as it is React). I am using Codesandbox for this tutorial but you can do it locally as well.

Now we need to install rooks so we can run

npm i - s rooks
Enter fullscreen mode Exit fullscreen mode

You can following the getting started guide for rooks.

Now let us see the code

Firstly, we need to import the hook:

import { useKeys } from "rooks";
Enter fullscreen mode Exit fullscreen mode

Now we need to configure the hook:

useKeys(["KeyQ", "KeyW", "KeyE", "KeyR", "KeyT", "KeyY"], () => {
    alert("QWERTY");
});
Enter fullscreen mode Exit fullscreen mode

Here, the first parameter is an array of all the keys that need to be pressed. We pass in a callback function which will be triggered if all the keys are pressed as the second parameter.

Now whenever the 6 keys are pressed together, we will see this alert -

image.png

Codesandbox -

Now we have successfully made our first Easter egg 🥳!!!

Now it is time for you to explore other hooks and come up with some great Easter eggs for your site.

Feel free to share your creations down in the comments section.

Top comments (1)

Collapse
 
scriptkavi profile image
ScriptKavi

You can also use scriptkavi/hooks

It is easy to use and pattern is similar to shadcn/ui.