Check Out React Pokedom — A Library To Catch Pokémon in React
Tags: javascript, programming, react, softwaredevelopment
Published: 2024-01-19 21:23:39

A couple of days ago, I came across a LinkedIn post announcing the release of [React Pokedom](https://github.com/aurasphere/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](https://github.com/aurasphere), the author of [GomorraSQL](https://writech.run/blog/check-out-gomorrasql-a-library-to-write-queries-in-neapolitan-3e85568dddb4), 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?

![React Pokedom's logo from GitHub by Federica Lisci](https://writech.run/wp-content/uploads/2023/08/image-49.png)

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](https://github.com/aurasphere/react-pokedom#react-pokedom)

Specifically, React Pokedom is a [TypeScript npm library for React](https://www.npmjs.com/package/@aurasphere/react-pokedom). 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:

```shell
npm install @aurasphere/react-pokedom
```

Or if you are a yarn user:

```shell
yarn add @aurasphere/react-pokedom
```

Then, you can check out all the TypeScript types used by React Pokedom [on GitHub](https://github.com/aurasphere/react-pokedom/blob/main/src/types.ts).

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](https://reactjs.org/docs/handling-events.html), as follows:

```javascript
// 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`](https://developer.mozilla.org/en-US/docs/Web/Events) 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:

```javascript
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:

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

// ...

<KantoRegion>
    <MyComponent />
</KantoRegion>
```

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

```javascript
// 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.
  
***
_The post "[Check Out React Pokedom — A Library To Catch Pokémon in React](https://writech.run/blog/check-out-react-pokedom-a-library-to-catch-pok-mon-alongside-dom-events-eb1c4f391e3c/)" appeared first on [Writech](https://writech.run)._