Package Exports

react-nice-avatar
react-nice-avatar/dist/index.js

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 editor / preview

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

Assets

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

Installation

npm install react-nice-avatar

yarn add react-nice-avatar

Usage

Import the component.

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

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("hi@dapi.to") 
```
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() 
```

Render the component with specific width / height and configuration.

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

<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

Clone the repo:

$ git clone git@github.com:dapi-labs/react-nice-avatar.git
$ cd react-nice-avatar

Install dependencies:
```
$ yarn
```
Or
```
$ npm install
```
Start the server for the demo:
```
$ make dev
```
Open the browser to reivew the demo:
```
$ open http://localhost:8080
```
Edit the files inside src.

Test

Lint test:
```
$ make lint-test
```
code test:
```
$ make test
```

Release

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

License

Released under MIT by @dapi-labs.