Avataaars kit for building React avatars
npm install avataaars-kitbash
npm install avataaars-kit
or
pnpm add avataaars-kit
or
yarn add avataaars-kit
`
---
Usage
$3
Choose the avatar settings as you like. With typescript, it will show type hints for each parts.
`tsx
import React from "react";
import Avatar from "avataaars-kit";
export default function AvatarWrapper() {
return (
Your avatar:
avatarStyle="Circle"
backgroundColor="Blue01"
topType="LongHairMiaWallace"
accessoriesType="Prescription02"
hairColor="BrownDark"
facialHairType="Blank"
clothType="Hoodie"
clothColor="PastelBlue"
eyeType="Happy"
eyebrowType="Default"
mouthType="Smile"
skinColor="Light"
/>
);
}
`
$3
Availabale parts are listed in topList, accessoriesList, facialHairList, clothList, graphicList, eyeList, eyebrowList, and mouthList. You may define a custom hook to generate random avatar settings.
`tsx
function getRandomAvatarSetting(): AvatarProps {
return {
avatarStyle: "Circle",
backgroundColor: "Blue01",
topType: randomSampleOne(topList),
accessoriesType: randomSampleOne(accessoriesList),
graphicType: randomSampleOne(graphicList),
hairColor: randomSampleOne(hairColorStringList),
facialHairType: randomSampleOne(facialHairList),
clothType: randomSampleOne(clothList),
clothColor: randomSampleOne(colorStringList),
eyeType: randomSampleOne(eyeList),
eyebrowType: randomSampleOne(eyebrowList),
mouthType: randomSampleOne(mouthList),
skinColor: randomSampleOne(skinColorStringList),
};
}
``