Beautifully crafted unique avatar placeholder for your next react project
MIT License
Beautifully crafted unique avatar placeholder for your next react project
Lightweight and customizable โค๏ธ
https://user-images.githubusercontent.com/1702215/158075475-c23004ab-827a-45ad-bdba-aee29ac5b582.mp4
Live Demo ๐งฉ | Website ๐งโโ๏ธ
Built by Nusu Alabuga and Oguz Yagiz Kara
๐ย Special thanks to Monika Michalczyk for awesome shapes ๐
With yarn
yarn add avvvatars-react
With npm
npm install avvvatars-react
Import Avvvatars to your app, then use it anywhere you want.
import Avvvatars from 'avvvatars-react'
export default function MyAvatar() {
return (
<Avvvatars value="[email protected]" />
)
}
value: string
This is required for plugin to work, each value generates a random avatar to unique to this value, so each time plugin renders, you will get the same results.
<Avvvatars value="[email protected]" />
displayValue?: string
Override default text by providing displayValue
for example if you provide value=โ[email protected]โ
the character output will be the first 2 letters of value which is โBEโ, if you pass displayValue=โBUโ
you can override it to BU
<Avvvatars value="[email protected]" displayValue="BE" />
style?: character | shape (default character)
Use shape or character as avatar.
<Avvvatars value="[email protected]" style="character" />
size?: number (default 32)
Override default size (32px) by providing a number.
<Avvvatars value="[email protected]" size={32} />
shadow?: boolean (default false)
Enable shadow around the avatar.
<Avvvatars value="[email protected]" shadow={false} />
radius?: number
(default size)Override the radius of the avatar, it takes size
by default to always turn it to a circle
<Avvvatars value="[email protected]" radius={10} />
border?: boolean (default false)
Toggle border
<Avvvatars value="[email protected]" border={false} />
borderSize?: number (default 2)
Override border width
<Avvvatars value="[email protected]" borderSize={2} />
borderColor?: string (default #fff)
Override border color
<Avvvatars value="[email protected]" borderColor="#fff" />
If you want to access design files to change something or customize it to your own, use our Figma File
MIT