Emojitar
An avatar libraray for your next react project. This library is inspired from Avvvatars and emojis are taken from Phosphor Library
Visit the site made with super.so
Features
- Generate unique avatars for your users
- Highly customisable
- 0 dependencies
- Switch between initials or emojis
Installation
Install it using you favourite packadge manager.
npm install emojitar
Get started
Import the library and use the component
import { Emojitar as Avatar } from "emojitar";
export default function (props) {
return <Avatar value="Ashish Khare" displayValue="ak" />;
}
Properties
-
value : string
It is a required field and avatar is generated on the basis of this property.
<Avatar value="flangdev3000@gmail.com" />
-
displayValue?: string
It is the text that will be displayed instead of the value property in the avatar.
<Avatar value="flangdev3000@gmail.com" displayValue="AK" />
-
emoji ?: none
Just specify the prop emoji to display emoji instead of initials.
<Avatar value="flangdev3000@gmail.com" emoji />
-
size ?: (number | 32)
Specify the size of the avatar. Or it is set to 32 by default.
<Avatar value="flangdev3000@gmail.com" size={36} />
-
radius ?: number
Specify the radius of the avatar, else it defaults to full rounded corners.
<Avatar value="flangdev3000@gmail.com" radius={6} />
-
shadow ?: none
This property applies a subtle shadow beneath the avatar.
<Avatar value="flangdev3000@gmail.com" shadow />
-
border ?: none
Apply this property to activate border on the avatar.
<Avatar value="flangdev3000@gmail.com" border />
-
borderSize ?: (number | 2)
Set width of border. Defaults to 2. It is important to also pass border prop while using borderSize prop.
<Avatar value="flangdev3000@gmail.com" border borderSize={6} />
-
borderColor ?: string
Accepts a string of valid CSS color code. Or else default to predefined color set.
<Avatar value="flangdev3000@gmail.com" border borderColor="#06dea6" />
Last Words
Hope you enjoy this library!
License
MIT