Nomnom Pumpernickle Muffins

    multi-avatars

    1.0.5 • Public • Published

    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:

    Install

    npm i multi-avatars

    DownloadsWeekly Downloads

    8

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    533 kB

    Total Files

    4

    Last publish

    Collaborators

    • jacksonkasi