react-nice-avatar

Online editor / preview

• https://nice-avatar.wwayne.com

Assets

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

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

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.