https://github.com/jacksonkasi0/multi-avatars
multi-avatars is a React component based on the npm package avataaars. It is random to you depending on what you are giving (or) give some other svg avatars.
https://github.com/jacksonkasi0/multi-avatars
avataaars avatar avatar-generator avatar-placeholder avatars multi multi-avatar multi-avatars npm npm-module npm-package react reactjs
Last synced: 3 months ago
JSON representation
multi-avatars is a React component based on the npm package avataaars. It is random to you depending on what you are giving (or) give some other svg avatars.
- Host: GitHub
- URL: https://github.com/jacksonkasi0/multi-avatars
- Owner: jacksonkasi0
- License: mit
- Created: 2022-03-08T07:51:53.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-03-10T17:53:19.000Z (over 3 years ago)
- Last Synced: 2025-02-28T10:57:13.518Z (4 months ago)
- Topics: avataaars, avatar, avatar-generator, avatar-placeholder, avatars, multi, multi-avatar, multi-avatars, npm, npm-module, npm-package, react, reactjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/multi-avatars
- Size: 237 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Multi Avatars?
**Multi Avatars: 🎉**
multi-avatars is a React component based on the **npm package [avataaars](https://www.npmjs.com/package/avataaars)**.
It is random to you depending on what you are giving
Or give some other svg avatars.
#### NOTE: **avataaars is a open-source project**
---
## Features
- SVG based
- Light weight
- Scalable
- Easy to use
- Fast
- It's don't affect your web performance 🚀
## Usage
**for dev:**
**for use:**
First, you need to install the `multi-avatars` component package, here you run
```sh
npm i multi-avatars
```
Then, in your React app, import the `avataaars ` and `multi-avatars` component and put it where you like it to be, for example
```sh
import Avatars from "multi-avatars";
export default function App() {
return (
);
}
```
## expalin the code: 👀
- The first of these is **true** which gives random avatars parts.
- The second refers to the number of **milliseconds** to give / change random avatars parts.
- Maybe if you only gave true then Avatars will give only once and it will not change after that.
Those parts will change only if you give the second millisecond.
#### For example:
```sh
eyeType={[true]}
```
- the `eyeType` only does not change as the above avatar is given only true in eyeType.
```sh
skinType = {["Brown"]
```
- And if you do not want to change a part of something you can give it(value) directly.
Look at the skin color of the avatar in the picture above...
> value = **Brown**
[Avatar Options](https://getavataaars.com) click here to know the avatars options...
- If you do not give a props something will probably take its default value.
- But `facialHairType` only will not appear in the avatar unless you use it alone.
```sh
// facialHairType={[true,500]} // if don't wand this field (facialHair), so u do not use this
```
---
## Hey guys 👋 read adout this...
**[Read my DEV POST✨](https://dev.to/jacksonkasi/how-i-am-create-my-first-beautiful-npm-package-with-21ga)**
### resource/info:
- [dry - qiuze](https://stackoverflow.com/questions/71244031/how-to-do-condition-based-dont-repeat-yourself-dry-principle-in-react-js)
- [How to publish your react component package to npm?](https://levelup.gitconnected.com/how-to-publish-your-react-component-package-to-npm-20ee4f81a506)