avatar

A Beautiful Avatar Generator Component For React

Jun 09, 2021
A Beautiful Avatar Generator Component For React

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](A fast react component wrapper for highlight.js)

Installation

npm install react-nice-avatar

or

yarn add react-nice-avatar

Usage

  1. Import the component

    import Avatar, { genConfig } from 'react-nice-avatar'
  2. Generate random config, the config can be saved into your database to use later

    const config = genConfig(AvatarConfig?)
  3. Render the component with specific width / height and configuration

    <Avatar style={{ width: '8rem', height: '8rem' }} {...config} />

    or

    <Avatar className="w-32 h-32" {...config} />

Options

The options can be passed into genConfig or as React props

keytypedefaultaccepttips
idstringOnly for React Props
classNamestringOnly for React Props
styleobjectOnly for React Props
shapestringcirclecircle, rounded, squareOnly for React Props
sexstringman, woman
faceColorstring
earSizestringsmall, big
hairColorstring
hairStylestringnormal, thick, mohawk, womanLong, womanShort
eyeStylestringcircle, oval, smile
glassesStylestringnone, round, squareUsually is none
noseStylestringshort, long, round
mouthStylestringlaugh, smile, peace
shirtStylestringhoody, short, polo
shirtColorstring
bgColorstring

Development

  1. Clone the repo:

    $ git clone [email protected]:chilllab/react-nice-avatar.git $ cd react-nice-avatar
  2. Install dependencies:

    $ yarn

    Or

    $ npm install
  3. Start the server for the demo:

    $ make dev
  4. Open the browser to reivew the demo:

    $ open http://localhost:5555
  5. Edit the files inside src.

Recommended