<Avatar/>
The Best React Avatars in Town.
Install
NPM:
With npm install react-hot-avatars
Yarn:
With yarn add react-hot-avatars
Demo
Link
Check live demo here
Getting Started
-
Import the Avatar
component from react-hot-avatars
:
import Avatar from 'react-hot-avatars';
-
Start using it!
Example
<Avatar name="john doe" size="300" rounded />
<Avatar name="_Leila" size="200" />
Lightweight, customizable and beautiful by default.
npm install react-hot-avatars
yarn add react-hot-avatars
Import the Avatar
component from react-hot-avatars
:
import Avatar from 'react-hot-avatars';
Start using it!
Example
<Avatar name="john doe" size="300" rounded />
<Avatar name="_Leila" size="200" />
A React Component using react-hot-avatars
import Avatar from 'react-hot-avatars';
const App = () => {
return (
<>
<Avatar name="aimed" size="300" />
<>
);
};
Supported props
- name
- size
- rounded
You can pass anything to generate a unique avatar for
Examples:
john doe, john@gmail.com, 😂Joy, etc
Other Options
Avatar
Attribute | Options | Default | Description |
---|---|---|---|
name |
string | "default" |
Will be used to generate avatar based on the initials of the person |
size |
string | "80" |
Use values like "200" , "300" , etc for adjusting the size of the avatar. |
rounded |
boolean | false |
Can be true or false to make the avatar be rounded or not Default false
|
Request a feature
If you feel like you are missing a cool feature in our package, here are few steps to follow for you to request an new feature
- Create an issue here
- Add title of of the issue, eg:
requesting an active badge feature
- In your description try to add clear explanation about your feature with an image attached if possible.
Contributing
Hello there
Start contributing
To contribute follow these simple steps
- Fork the repo and create your branch from main.
- Create a new issue
- Commit changes to your branch..
- Create pull request
🎉
Make sure to make a good branch name
Your branch should be name like your_name/issue_fix
.
For example: gasaroleila/avatar-style
Issues
- If you spot a problem, search if an issue already exists in the search the issue tracker. If a related issue doesn't exist, you can open a new issue using a relevant issue form.
- If you want to simply solve issues, Find one to solve in the existing issues