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
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";
Now we need to configure the hook:
useKeys(["KeyQ", "KeyW", "KeyE", "KeyR", "KeyT", "KeyY"], () => {
alert("QWERTY");
});
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 -
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)
You can also use scriptkavi/hooks
It is easy to use and pattern is similar to shadcn/ui.