React Astronaut

A React Astronaut é uma biblioteca que oferece mais de 200 opções de avatares de astronautas para você usar em seu projeto.

Instalação

yarn add react-astronaut
# ou
npm install react-astronaut --save

Exemplo de uso

import ReactAstronaut from 'react-astronaut';

function App() {
  return (
    <div className="App">
      <ReactAstronaut astronaut="ASTR104" />
    </div>
  );
}

Funções auxiliares

Além do componente , a biblioteca inclui também algumas funções auxiliares:

getAstronauts(page, take, search)

Retorna todos os avatares disponíveis.

import ReactAstronaut, { getAstronauts } from 'react-astronaut';

function App() {

  const getAstronauts = getAstronauts(1, 10, 'alien');
  
  return (
    <div className="App">
      {allAstronauts.map(item => (
        <ReactAstronaut astronaut={item.code} />
      )}     
    </div>
  );
}

| Parâmetro | Tipo | Notes | | ----------- | --------------------- | ------------------------------- | | page | NUMBER | Número da página usada para sistemas de paginação. | | take | NUMBER | Quantidade de registos exibidor por página| | search | STRING | Termo usado para filtrar avatares baseado em tags. |

getRandomAstronaut()

Retorna um avatar aleatório.

import ReactAstronaut, { getRandomAstronaut } from 'react-astronaut';

function App() {

  const randomAstronaut = getRandomAstronaut();
  
  // response: {
  //   "tags_en": [
  //       "astronaut",
  //       "sitting",
  //       "earth"
  //   ],
  //   "tags_br": [
  //       "astronauta",
  //       "sentando",
  //       "terra"
  //   ],
  //   "url": "http://res.cloudinary.com/astronaut-images/image/upload/v1657429440/tez3eq15trtkr2e2uyes.webp",
  //   "code": "ASTR167"
  // }

  return (
    <div className="App">
      <ReactAstronaut astronaut={randomAstronaut.code} />
    </div>
  );
}

getAllAstronauts()

Retorna todos os avatares disponíveis.

import ReactAstronaut, { getAllAstronauts } from 'react-astronaut';

function App() {

  const allAstronauts = getAllAstronauts();
  
  return (
    <div className="App">
      {allAstronauts.map(item => (
        <ReactAstronaut astronaut={item.code} />
      )}     
    </div>
  );
}

Créditos

Os direitos autorais de todas as imagens disponibilizadas nesta biblioteca são de @catalyststuff. As imagen foram obtidas através do seu perfil no Freepik.