React Pokedom — A Library to Catch Pokémon in React

There are over 800 Pokémon hiding in your DOM. gotta catch em all!

photo by sisterjit barman Feather unsplash

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!

React Pokédom Logo Se github By federica liski

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

every time 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) => 
if (event.pokemon)
console.log("Pokémon caught!");
else
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 usePokedex with as below:

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

// ...



now in 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 (
// ...
)

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.

Leave a Reply