There are over 800 Pokémon hiding in your DOM. gotta catch em all!
A few days ago, I came across a LinkedIn post announcing the release of React to Pokedum, I found the idea behind the project quite intriguing, and I couldn’t resist watching it. I had to learn more.
created by donato rimentiFrom the author of GomorraSQL, React Pokedum is a React library for catching Pokemon. These Pokémon hide in the DOM of the web page instead of hiding in the grass. There are over 800 Pokémon hidden in the DOM, and the challenge is to catch them all.
Let’s learn how the React Pokedom library works and how you can catch Pokemon in React!
First, let’s try to understand what React PokéM is:
“React Pokédom is a React library for catching Pokémon with your DOM events. There are over 800 Pokémon hiding in your DOM. Can you catch them all? , React Pokédom GitHub page
Specifically, the React Pokédom is a Typescript npm library for React, The library is based on two custom React hooks:
Let’s now learn how to use these two hooks to play with React Pokédom and start catching Pokémon. But first, let’s see how you can install React Pokédom.
You can add React Pokemon to your project’s dependencies with the following npm command:
npm install @aurasphere/react-pokedom
or if you are yarn user:
yarn add @aurasphere/react-pokedom
Then, you can check out all the TypeScript types used by React Pokédom here: https://github.com/aurasphere/react-pokedom/blob/main/src/types.ts,
Congrats! Now you have everything you need to capture the Pokémon hidden in your DOM!
React Pokédom is all about catching Pokémon with Dome events and viewing captured Pokémon in the Pokedex. Let’s learn how to do both operations!
catch your first pokemon
Revolves around catching Pokémon in React Pokédom
usePokeball hook. By extension, this hook returns a function which you can use as a DOM event handler functionas follows:
// importing the usePokeball hook from React Pokedom
import usePokeball from '@aurasphere/react-pokedom';
// initializing the DOM event callback to catch Pokémon
const pokeball = usePokeball();
// by clicking this button, the pokeball() callback
// gets called
pokeball() When the DOM event callback is called, you can catch the Pokémon. It depends on how many Pokémon are hidden in the Dome and whether or not the Poké Ball was successful. Just like in the Pokémon games, this is a random process.
If you want to know if you’ve caught a Pokémon without looking in the Pokedex, you can pass a callback function as an argument to the hook. This callback parameter accepts parameters of type Function
PokedomEventwhich is nothing more than a
Event type with an optional
pokemon Farm. If
pokemon If the field is present, the Pokémon is caught.
You can pass a callback function
usePokeball as below:
const pokemonCaptureCallback = (event) =>
console.log("You weren't lucky! Try again...");
const pokeball = usePokeball(pokemonCaptureCallback);
pokemonCaptureCallback() will be ordered within
pokeball() Event callback function and will tell you if the pokemon was caught or not.
Explore the Pokedex
There is no Pokémon game without a Pokedex. thanks to
usePokedex Hook, you can see the Pokémon you’ve caught so far. especially,
usePokedex Returns an array of the Pokémon you’ve caught.
However, keep in mind that the hook only works in the Pokémon world!
so, if you want
usePokedex For this to work, you must first wrap the component where you call
import KantoRegion from '@aurasphere/react-pokedom';
you can use
usePokedex as follows:
import usePokedex from '@aurasphere/react-pokedom';
export default function MyComponent()
// getting the list of Pokémon caught up to this moment
const pokedex = usePokedex()
And voila! You’ve just learned how to play with React Pokédom! Now, all that’s left is to catch all the Pokémon hidden in your DOM. gotta catch em all!
In this article, we looked at React Pokédom, a TypeScript NPM library that allows you to catch Pokémon via DOM events. Projects like this play a major role in helping curious people and kids to try and enter the programming world. It’s never been easier to turn coding into a fun experience, and React Pokedum pulls it off!
Thanks for reading! I hope you find this article helpful. Feel free to contact me with any questions, comments or suggestions.