1.5.0 • Published 5 months ago
react-nice-avatar v1.5.0
react-nice-avatar
Online editor / preview
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("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} />
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 git@github.com: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.
1.5.0
5 months ago
1.4.1
11 months ago
1.4.0
1 year ago
1.3.1
1 year ago
1.3.0
1 year ago
1.2.4
3 years ago
1.2.3
3 years ago
1.2.2
3 years ago
1.2.0
3 years ago
1.2.1
3 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago
0.0.1
3 years ago