Check Out React Pokedom — A Library To Catch Pokémon in React

A couple of days ago, I came across a LinkedIn post announcing the release of React Pokedom. The idea behind the project seemed quite intriguing to me, and I couldn’t resist looking into it. I had to learn more.

Created by Donato Rimenti, the author of GomorraSQL, React Pokedom is a React library for catching Pokémon. Instead of hiding in the grass, these Pokémon hide in the DOM of a web page. More than 800 Pokémon are hidden in the DOM, and the challenge is to catch them all.

Let’s find out how the React Pokedom library works and how you can catch Pokémon in React!

What Is React Pokedom?

First of all, let’s try to understand what React Pokedom is:

“React Pokedom is a React library for catching Pokémon alongside your DOM events. There are more than 800 Pokémon hiding in your DOM. Can you catch them all?” — React Pokedom GitHub page

Specifically, React Pokedom is a TypeScript npm library for React. The library is based on two custom React hooks:

• usePokeball
• usePokedex

Let’s now learn how to use these two hooks to play with React Pokedom and start catching Pokémon. But first, let’s see how you can install React Pokedom.

Get Started With React Pokedom

You can add React Pokedom to your project’s dependencies with the following npm command:

npm install @aurasphere/react-pokedom

Or if you are a yarn user:

yarn add @aurasphere/react-pokedom

Then, you can check out all the TypeScript types used by React Pokedom on GitHub.

Congrats! You now have everything to start catching the Pokémon hiding in your DOM!

How To Use React Pokedom

React Pokedom is about catching Pokémon alongside DOM events and viewing the Pokémon caught in the Pokédex. Let’s learn how to perform both operations!

Catch your first Pokémon

Catching a Pokémon in React Pokedom revolves around the usePokeball hook. In detail, this hook returns a function that you can use as a DOM event handler function, as 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
<button onClick={pokeball}>
  Click here try to catch a Pokemon!
</button>

Every time the pokeball() DOM event callback gets called, you might catch a Pokémon. This depends on how hidden the Pokémon is in the DOM and whether the Poké Ball was successful. Just as in the Pokémon games, that’s a random process.

If you want to know if you caught a Pokémon without having to look at the Pokédex, you can pass a callback function as an argument to the hook. This callback parameter function accepts a parameter of type PokedomEvent, which is nothing more than a Event type with an optional pokemon field. If the pokemon field is present, then a Pokémon is caught.

You can pass a callback function to usePokeball as below:

const pokemonCaptureCallback = (event) => {
    if (event.pokemon) {
        console.log("Pokémon caught!");
    } else {
        console.log("You weren't lucky! Try again...");
    }
}

const pokeball = usePokeball(pokemonCaptureCallback);

pokemonCaptureCallback() will be invoked within the pokeball() event callback function and will tell you whether or not a Pokémon was caught.

Explore the Pokédex

There are no Pokémon-related games without a Pokédex. Thanks to the usePokedex hook, you can view the Pokémon you caught so far. Specifically, usePokedex returns the array of Pokémon you caught.

However, keep in mind that the hook only works in the Pokémon world!

So, if you want usePokedex to work, you first have to wrap the component where you call usePokedex with <KantoRegion>, as below:

import { KantoRegion } from '@aurasphere/react-pokedom';

// ...

<KantoRegion>
    <MyComponent />
</KantoRegion>

Now, in <MyComponent> you can use usePokedex as follows:

// src/components/MyComponent.js

import { usePokedex } from '@aurasphere/react-pokedom';

// ...

export default function MyComponent() {
    // getting the list of Pokémon caught up to this moment
    const pokedex = usePokedex()

    // ...

    return (
        // ...
    )
}

Et voilà! You just learned how to play with React Pokedom! Now, all that remains is to catch all the Pokémon hiding in your DOM. Gotta catch ’em all!

Conclusion

In this article, we looked at React Pokedom, 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 approach and enter the programming world. Turning coding into a fun experience isn’t that easy, and React Pokedom pulls it off!

Thanks for reading! I hope you found this article helpful.