react-astronaut

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.