react-nice-avatar

Online editor / preview

• https://nice-avatar.dapi.to/

Assets

• Designer: @Micah on Figma
• Figma files: Avatar Illustration System

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 a configuration

   Config can be generated with a seed, a seed is a string of name, email or any string you like

   const config = genConfig("[email protected]") 

   or it can be generate with a customized object, plz check the Options below for what attributes can be passed in

   const config = genConfig({ sex: "man", hairStyle: "mohawk" }) 

   or generating a random config by passing nothing to the function genConfig

   const config = genConfig() 

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

| 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 | | | hairColorRandom | boolean | false | | thick,mohawk default only be black | | hatColor | string | | | | | hatStyle | string | | none, beanie, turban | Usually is none | | 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 | | | | | isGradient | boolean | false | | |

Development

1. Clone the repo:

   $ git clone [email protected]:dapi-labs/react-nice-avatar.git
   $ cd react-nice-avatar

2. Install dependencies:

   $ yarn

3. Start the server for the demo:

   $ make dev

4. Open the browser to reivew the demo:

   $ open http://localhost:8080

5. Edit the files inside src.

Test

1. Lint test:

   $ make lint-test

2. code test:

   $ make test

Release

$ make release level=patch | minor | major | 1.3.0

License

Released under MIT by @dapi-labs.