https://github.com/anshumanv/react-poke-sprites

A react component that renders animated pokemon sprites.
https://github.com/anshumanv/react-poke-sprites

component node nodejs npm pokemon react sprites

Last synced: 10 days ago
JSON representation

A react component that renders animated pokemon sprites.

• Host: GitHub
• URL: https://github.com/anshumanv/react-poke-sprites
• Owner: anshumanv
• License: mit
• Created: 2018-01-14T14:49:05.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-12-22T18:13:26.000Z (almost 5 years ago)
• Last Synced: 2024-10-11T09:14:57.935Z (26 days ago)
• Topics: component, node, nodejs, npm, pokemon, react, sprites
• Language: JavaScript
• Homepage:
• Size: 251 KB
• Stars: 23
• Watchers: 3
• Forks: 5
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



 react-poke-sprites 





  





  





  







A react component that renders animated pokemon sprites


### Installation

Install the npm module in your app directory.

```sh

npm i react-poke-sprites

OR

yarn add react-poke-sprites

```

### Usage

- With a given pokémon name (case insensitive)

```js

import PokeSprite from 'react-poke-sprites'

 // passes this className to the rendered sprite

```

- With a given pokémon id (make sure the ID is valid)

You may refer this [link](https://bulbapedia.bulbagarden.net/wiki/List_of_Pok%C3%A9mon_by_National_Pok%C3%A9dex_number) to get id's of all pokémons.

```js

import PokeSprite from 'react-poke-sprites'

 // passes this className to the rendered sprite

```

## Props

- **pokemon** - Pass the name or the ID of the pokemon.

- **className** - Pass in a class name to modify as you see fit.

## Related

- A corresponding Vue.js component is [here](https://github.com/anshumanv/vue-poke-sprites).

### Credits

- Uses [pokemon-gif](https://www.npmjs.com/package/pokemon-gif) to retrieve links from [Pokestadium](http://www.pokestadium.com/tools/sprites).

- There's already a component for this [here](https://github.com/jackrzhang/react-pokemon-gif) but it wasn't working in my case so I decided to create my own.

## Author

[Anshuman Verma](https://github.com/anshumanv)

[](https://twitter.com/Anshumaniac12)

[](https://linkedin.com/in/anshumanv12)

[](https://www.facebook.com/anshumanv12)

[](https://www.paypal.me/AnshumanVerma)

## Contribute

Found a bug, please [create an issue](https://github.com/anshumanv/react-poke-sprites/issues/new)

## License

[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/anshumanv/react-poke-sprites/blob/master/LICENSE)

> © Anshuman Verma