funifier-nice-avatar
v1.3.10
Published
extended version of the original react library for generating avatar - @dapi-labs/react-nice-avatar
Downloads
29
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
or
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("[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()
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
- Clone the repo:
$ git clone [email protected]:dapi-labs/react-nice-avatar.git $ cd react-nice-avatar
- Install dependencies:
$ yarn
- 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.