How to use genConfig to create random avatar.

[Kedar-Khedkar]

Hey, I am using nice-avatar in my react project and want to generate random avatars from genConfig. Can you give me a code snippet for generating a random avatar?

[wwayne]

Hi, you can use genConfig without passing in any parameters, which will give you a random object which describes all the details about the avatar, then you can just put that object into the React component, e.g.:

import Avatar, { genConfig } from 'react-nice-avatar'
const config = genConfig() 
<Avatar style={{ width: '8rem', height: '8rem' }} {...config} />

[Kedar-Khedkar]

Okay, thank you. But what if I want to make a random avatar from selected props?
I tried doing this.

const global_config={
    "sex":[ "man","woman"],
  "faceColor": ["#F9C9B6"],
  "earSize": ['small', 'big'],
  "eyeStyle": ['circle', 'oval', 'smile'],
  "noseStyle": ['short', 'long', 'round'],
  "mouthStyle": ['laugh', 'smile', 'peace'],
  "shirtStyle": ['hoody', 'short', 'polo'],
  "glassesStyle": ['none', 'round', 'square'],
  "hairColor": ["#506AF4"],
  "hairStyle": [	'normal', 'thick', 'mohawk', 'womanLong', 'womanShort'],
  "hatStyle": ['none', 'beanie', 'turban'],
  "hatColor": ["#77211D"],
  "eyeBrowStyle": ["up","upWoman"],
  "shirtColor": ["#77311D"],
  "bgColor": ["linear-gradient(45deg, #3e1ccd 0%, #ff6871 100%)"]

  }

  function random_avatar(){
    const config={
      'sex': Math.floor(Math.random() * global_config['sex'].length),
      "earSize":  Math.floor(Math.random() * global_config['earSize'].length), 
      "faceColor":  Math.floor(Math.random() * global_config['faceColor'].length),
      "eyeStyle":  Math.floor(Math.random() * global_config['eyeStyle'].length),
      "noseStyle":  Math.floor(Math.random() * global_config['noseStyle'].length),
      "mouthStyle":  Math.floor(Math.random() * global_config['mouthStyle'].length),
      "shirtStyle":  Math.floor(Math.random() * global_config['shirtStyle'].length),
      "glassesStyle":  Math.floor(Math.random() * global_config['glassesStyle'].length),
      "hairColor":  Math.floor(Math.random() * global_config['hairColor'].length),
      "hairStyle":  Math.floor(Math.random() * global_config['hairStyle'].length),
      "hatStyle": Math.floor(Math.random() * global_config['hatStyle'].length),
      "hatColor":  Math.floor(Math.random() * global_config['hatColor'].length),
      "eyeBrowStyle":  Math.floor(Math.random() * global_config['eyeBrowStyle'].length),
      "shirtColor":  Math.floor(Math.random() * global_config['shirtColor'].length),
      "bgColor":  Math.floor(Math.random() * global_config['bgColor'].length)
    }
    return config
  }
  const config = random_avatar()

[wwayne]

yeah you can do this, I can't imagine a better way than yours to be honest