Package Exports

react-nice-avatar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-nice-avatar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-nice-avatar

Online demo

https://nice-avatar.chilllab.io/

Assets

Designer: Micah
Figma files: https://www.figma.com/community/file/829741575478342595

Installation

npm install react-nice-avatar

yarn add react-nice-avatar

Usage

Import the component

import Avatar, { genConfig } from 'react-nice-avatar'

Generate random config, the config can be saved into your database to use later

const config = genConfig(AvatarConfig?)

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

$ git clone git@github.com:chilllab/react-nice-avatar.git: Clone the codebase
$ yarn or $ npm install: Install dependencies
$ make dev: Star the server for the demo
$ open http://localhost:5555: Open the browser to reivew the demo
Edit the files inside /src

License

MIT