With NPM:
npm install react-hot-avatars
With Yarn:
yarn add react-hot-avatars
Check live demo here Link
-
Import the
Avatar
component fromreact-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" />
<>
);
};
- name
- size
- rounded
Examples:
john doe, [email protected], ๐Joy, etc
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 |
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.
Hello there ๐, We're very happy you want to contribute to this project. But be sure to follow the Contribution guide && code of conduct before submitting your contribution๐ .
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 ๐
Your branch should be name like your_name/issue_fix
.
For example: gasaroleila/avatar-style
- 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