Multi Avatars?

Multi Avatars: 🎉

multi-avatars is a React component based on the npm package avataaars.

It is random to you depending on what you are giving Or give some other svg avatars.

NOTE: avataaars is a open-source project

Features

• SVG based
• Light weight
• Scalable
• Easy to use
• Fast
• It's don't affect your web performance 🚀

Usage

for dev:

for use:

First, you need to install the multi-avatars component package, here you run

npm i multi-avatars

Then, in your React app, import the avataaars and multi-avatars component and put it where you like it to be, for example

import Avatars from "multi-avatars";

export default function App() {
  return (
      <Avatars
        avatarStyle={[true, 500]}
        topType={[true, 1000]}
        accessoriesType={[true, 1200]}
        //facialHairType={[true,500]}
        //facialHairType={[true,500]}
        clothesType={[true, 500]}
        clothesColorType={[true, 1000]}
        eyeType={[true]}
        eyebrow={[true, 2000]}
        mouthType={[true, 1200]}
        skinType={["Brown"]}
      />
  );
}

expalin the code: 👀

• The first of these is true which gives random avatars parts.

• The second refers to the number of milliseconds to give / change random avatars parts.

• Maybe if you only gave true then Avatars will give only once and it will not change after that. Those parts will change only if you give the second millisecond.

For example:

eyeType={[true]}

• the eyeType only does not change as the above avatar is given only true in eyeType.

skinType = {["Brown"]

• And if you do not want to change a part of something you can give it(value) directly. Look at the skin color of the avatar in the picture above...

value = Brown

Avatar Options click here to know the avatars options...

• If you do not give a props something will probably take its default value.

• But facialHairType only will not appear in the avatar unless you use it alone.

// facialHairType={[true,500]} // if don't wand this field (facialHair), so u do not use this

Hey guys 👋 read adout this...

Read my DEV POST✨

resource/info:

• dry - qiuze

• How to publish your react component package to npm?