Skip to content

Latest commit

 

History

History
140 lines (110 loc) · 5.13 KB

README.md

File metadata and controls

140 lines (110 loc) · 5.13 KB
Raw

react-nice-avatar

Version npm download Build Status Netlify Status

Online editor / preview

Assets

Installation

npm install react-nice-avatar

or

yarn add react-nice-avatar

Usage

  1. Import the component.

    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

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

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

  1. Clone the repo: 
    $ git clone git@github.com:dapi-labs/react-nice-avatar.git
$ cd react-nice-avatar
  2. Install dependencies: 
    $ yarn
  3. Start the server for the demo: 
    $ make dev
  4. Open the browser to reivew the demo: 
    $ open http://localhost:8080
  5. Edit the files inside src.

Test

  1. Lint test:

    $ make lint-test

  2. code test:

    $ make test

Release

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

License

Released under MIT by @dapi-labs.