Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dapi-labs/react-nice-avatar
react library for generating avatar
https://github.com/dapi-labs/react-nice-avatar
avatar avatar-generator avatar-placeholder react react-avatar react-avatar-editor
Last synced: about 15 hours ago
JSON representation
react library for generating avatar
- Host: GitHub
- URL: https://github.com/dapi-labs/react-nice-avatar
- Owner: dapi-labs
- License: mit
- Created: 2021-05-29T15:41:45.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-23T00:41:28.000Z (5 months ago)
- Last Synced: 2024-11-27T15:02:37.566Z (15 days ago)
- Topics: avatar, avatar-generator, avatar-placeholder, react, react-avatar, react-avatar-editor
- Language: TypeScript
- Homepage: https://nice-avatar.wwayne.com
- Size: 1.52 MB
- Stars: 1,081
- Watchers: 10
- Forks: 92
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome - dapi-labs/react-nice-avatar - react library for generating avatar (TypeScript)
- best-of-react - GitHub - 8% open · ⏱️ 21.12.2023): (Other Components)
README
# react-nice-avatar
[](https://www.npmjs.org/package/react-nice-avatar)
[![npm download][download-image]][download-url]
[](https://app.travis-ci.com/github/dapi-labs/react-nice-avatar)
[](https://app.netlify.com/sites/gracious-turing-db4aa3/deploys)
[download-image]: https://img.shields.io/npm/dm/react-nice-avatar.svg?style=flat-square
[download-url]: https://npmjs.org/package/react-nice-avatar
## Online editor / preview
- https://nice-avatar.wwayne.com
## Assets
- Designer: [@Micah](https://www.figma.com/@Micah) on Figma
- Figma files: [Avatar Illustration System](https://www.figma.com/community/file/829741575478342595)
## Installation
```sh
npm install react-nice-avatar
```
or
```sh
yarn add react-nice-avatar
```
## Usage
1. Import the component.
```js
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
```js
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
```js
const config = genConfig({ sex: "man", hairStyle: "mohawk" })
```
or generating a random config by passing nothing to the function genConfig
```js
const config = genConfig()
```
3. Render the component with specific width / height and configuration.
```jsx
```
or
```jsx
```
## 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:
```sh
$ git clone [email protected]:dapi-labs/react-nice-avatar.git
$ cd react-nice-avatar
```
2. Install dependencies:
```sh
$ yarn
```
3. Start the server for the demo:
```sh
$ make dev
```
4. Open the browser to reivew the demo:
```sh
$ open http://localhost:8080
```
5. Edit the files inside [src](/src).
## Test
1. Lint test:
```sh
$ make lint-test
```
2. code test:
```sh
$ make test
```
## Release
```sh
$ make release level=patch | minor | major | 1.3.0
```
## License
Released under [MIT](/LICENSE) by [@dapi-labs](https://github.com/dapi-labs).