react-nice-avatar

[![npm download][download-image]][download-url]

[download-image]: https://img.shields.io/npm/dm/react-nice-avatar.svg?style=flat-square
[download-url]: https://npmjs.org/package/react-nice-avatar

width="600" alt="imagewall" />

Online editor / preview

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

Assets

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

Installation

``sh
npm install react-nice-avatar
`

or

`sh
yarn add react-nice-avatar
`

Usage

1. Import the component.
`js
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
`js
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
`js
const config = genConfig({ sex: "man", hairStyle: "mohawk" })
`

or generating a random config by passing nothing to the function genConfig
`js
const config = genConfig()
`

3. Render the component with specific width / height and configuration.
`jsx

`
or

`jsx

`

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:
`sh
$ git clone git@github.com:dapi-labs/react-nice-avatar.git
$ cd react-nice-avatar
`
2. Install dependencies:
`sh
$ yarn
`
3. Start the server for the demo:
`sh
$ make dev
`
4. Open the browser to reivew the demo:
`sh
$ open http://localhost:8080
`
5. Edit the files inside src.

Test

1. Lint test:
`sh
$ make lint-test
`

2. code test:
`sh
$ make test
`

Release

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

License

Released under MIT by @dapi-labs.