react-nice-avatar

Online editor / preview

• https://nice-avatar.chilllab.io/

Assets

• Designer: Micah
• Figma files: https://www.figma.com/community/file/829741575478342595

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 random config, the config can be saved into your database to use later

const config = genConfig(AvatarConfig?)

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. $ git clone [email protected]:chilllab/react-nice-avatar.git: Clone the codebase
2. $ yarn or $ npm install: Install dependencies
3. $ make dev: Star the server for the demo
4. $ open http://localhost:5555: Open the browser to reivew the demo
5. Edit the files inside /src

License

MIT