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

1. value : string It is a required field and avatar is generated on the basis of this property.

<Avatar value="[email protected]" />

2. displayValue?: string It is the text that will be displayed instead of the value property in the avatar.

<Avatar value="[email protected]" displayValue="AK" />

3. emoji ?: none Just specify the prop emoji to display emoji instead of initials.

<Avatar value="[email protected]" emoji />

4. size ?: (number | 32) Specify the size of the avatar. Or it is set to 32 by default.

<Avatar value="[email protected]" size={36} />

5. radius ?: number Specify the radius of the avatar, else it defaults to full rounded corners.

<Avatar value="[email protected]" radius={6} />

6. shadow ?: none This property applies a subtle shadow beneath the avatar.

<Avatar value="[email protected]" shadow />

7. border ?: none Apply this property to activate border on the avatar.

<Avatar value="[email protected]" border />

8. borderSize ?: (number | 2) Set width of border. Defaults to 2. It is important to also pass border prop while using borderSize prop.

<Avatar value="[email protected]" border borderSize={6} />

9. borderColor ?: string Accepts a string of valid CSS color code. Or else default to predefined color set.

<Avatar value="[email protected]" border borderColor="#06dea6" />

Last Words

Hope you enjoy this library!

License

MIT