react-nice-avatar

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("[e-mail]") 
   

   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 [e-mail]: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.

Changelog

1.5.0 (2023-11-28)

Bug Fixes

• use fixed id to fix potentially ssr rendering issue (9e12681)