react-nice-avatar

react library for generating avatar.

react-nice-avatar

It has been a while for me to look for an avatar generator for my users that just signed up with an Email on the product, and I prefer a mockup of the human face.

View Demo View Github

Installation

npm install react-nice-avatar
Sh

or

yarn add react-nice-avatar
Sh

Usage

  1. Import the component
    import Avatar, { genConfig } from 'react-nice-avatar'
    Js
  2. Generate random config, the config can be saved into your database to use later
    const config = genConfig(AvatarConfig?)
    Js
  3. Render the component with specific width / height and configuration
    <Avatar style={{ width: '8rem', height: '8rem' }} {...config} />
    React JSX
    or
    <Avatar className="w-32 h-32" {...config} />
    React JSX

Options

The options can be passed into genConfig or as React props

key type default accept tips
id string Only for React Props
className string Only for React Props
style object Only for React Props
shape string circle circle, rounded, square Only for React Props
sex string man, woman
faceColor string
earSize string small, big
hairColor string
hairStyle string normal, thick, mohawk, womanLong, womanShort
eyeStyle string circle, oval, smile
glassesStyle string none, round, square Usually is none
noseStyle string short, long, round
mouthStyle string laugh, smile, peace
shirtStyle string hoody, short, polo
shirtColor string
bgColor string

Development

  1. Clone the repo:
    $ git clone git@github.com:chilllab/react-nice-avatar.git
$ cd react-nice-avatar
    Sh
  2. Install dependencies:
    $ yarn
    Sh
    Or
    $ npm install
    Sh
  3. Start the server for the demo:
    $ make dev
    Sh
  4. Open the browser to reivew the demo:
    $ open http://localhost:5555
    Sh
  5. Edit the files inside src.