react-playful-avatar

Online Avatar Maker

• https://playful-avatar.romubuntu.dev

Assets

• Designer: @DrawKitTeam
• Figma files: Playful Avatar Illustration System

Installation

npm install react-playful-avatar

or

yarn add react-playful-avatar

Usage

Playful Avatar

1. Import the component.

   import {PlayfulAvatar} from 'react-playful-avatar'

2. Generate an Avatar

   Playful Avatar can be generated with a string seed. It can be a name, email or any string you like.

   const seededConfig = genUserConfigBySeed('[email protected]')
   <PlayfulAvatar {...seededConfig} /> 

   Playful Avatar can also be generated with customized props. You can check the attributes below. If some attributes are not passed, they will be randomly generated.

     <PlayfulAvatar
     eyes="Angry"
     backgroundShape="Rounded"
     />

   const customConfig = {eyes:"Angry",backgroundShape:"Rounded" }
     <PlayfulAvatar {...customConfig}/>

   You can also generate a random avatar by passing nothing to the component.

   <PlayfullAvatar /> 

3. You should pass a CSS style to define the width for the component.

   <PlayfulAvatar style={{ width: '100', height: '100' }}  />

   or

   <PlayfulAvatar style={{ width: '20vh', height: 'auto', aspect-ratio:1 }}  />

Playful Element

1. Import the component.

   import {PlayfulElement, AVATAR_ELEMENTS} from 'react-playful-avatar'

2. Generate an element.

   You can show all the different element available with this component. You should pass an TAvatarElement from the ALL_ELEMENT. ALL_ELEMENT is an object with list for all types of elements.

   You can display one unique element.

   <PlayfulElement element={AVATAR_ELEMENTS.accessory[0]} />

   or, you can display all the element to create your own avatar maker.

   {AVATAR_ELEMENTS.accessory.map((item, index) => {
   return <PlayfulElement element={item} key={index} />
   })}

3. For the elements with customizable colors such as Haircut and Face, you can pass colorProps.

   <PlayfulElement element={AVATAR_ELEMENTS.haircut[0]}
   colorProps={'#EEEEEE'}
   />

4. You should pass a CSS style to define the width for the component.

   <PlayfulElement style={{ width: '100', height: '100' }}  />

   or

   <PlayfulElement style={{ width: '20vh', height: 'auto', aspect-ratio:1 }}  />

Options

The options can be passed as React props. It is defines as TUserConfig.

| key | type | default | accept | tips | | -------------- | ------ | ------- | -------------------------------------------- | -------------------- | | id | string | | | Only for React Props | | style | object | | | Only for React Props | | backgroundShape| TAvatarBackgroundShape | circle | Square, Rounded, Circle | | | backgroundColor| string | | | Use Hex colors | | accessory | TAvatarAccessory | | Rounded Glasses,Simple Earring,Glasses,Futuristic Glasses,Stylish Glasses,Mask,Earring,Cap,Circle Earring,Mask Google,Moustache,Earphone| | | eyes | TAvatarEyes | |Thin, Closed, Cynic, Sad, Angry, Normal | | | face | TAvatarFace | | Blush, Bear, Normal | | | faceColor | string | | |Use Hex colors | | mouth | TAvatarMouth | | Normal Smile, Normal Thin, Eat, Open Mouth Open Tooth, Sad, Angry, Cute, Hate, Smiliey | | | outfit | TAvatarOutfit | | Blue hoodie, Retro yellow polo, Classic suit with red tie, Pastel blue sweater, Aviator jacket, Grey sweater with white scarf, Green sweater with yellow polka dots, Striped purple cardigan, Red sweater with white diamonds, Pink sweater with round patterns, Purple sweater with Peter Pan collar, Chic jacket with gold pendant, Blue overalls with green buttons, Black sweater with floral white collar, Black top with geometric patterns, Black buttoned tank top, Yellow top with black pompoms, Orange top with festive patterns, Simple purple sweater, Classic blue overalls, Black shirt with white collar, Black top with wavy stripes, Brown pinafore dress | haircut | TAvatarHaircut | |Classic short, Double bun, Bob with bangs, Retro pompadour, Relaxed mullet, Natural waves, Structured short, Stylish quiff, Rockabilly, Bohemian flower, Space buns, Messy pixie, Voluminous curls, Asymmetrical short, Short curls, Spiky punk, Retro wave, Wavy short, Thick curls, Low ponytail, High ponytail, Tight curls, Side shave | | | haircutColor | string | | | Use Hex colors |

License

Released under MIT by @romubuntu.