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.