rn-avvvatars
v0.0.5
Published
generates unique placeholder avatars with either characters or shapes for your react native project
Downloads
25
Maintainers
Readme
Avvvatars
Beautifully crafted unique avatar placeholder for your next react native project
Lightweight and customizable ❤️
https://user-images.githubusercontent.com/1702215/158075475-c23004ab-827a-45ad-bdba-aee29ac5b582.mp4
Built by Nusu Alabuga and Oguz Yagiz Kara
🙏 Special thanks to Monika Michalczyk for awesome shapes 🙏
Features
- 🌈 40 Colors - Colors are so on point that most of the projects can use it without changing it
- 💠 60 Shapes - Beautifully crafted shapes that are unique to your user with color combination
- 🆎 Text or Shapes 🔸 - Use letters (eg. JD for John Doe) or unique shapes
- 🤠 Unique to user - Generated avatars are unique to the string that you provide, it means if you pass [email protected] you will always get the same avatar
- 🕊 Lightweight - less than 20kb compressed + gzipped
- ✍️ Customizable - use shadows, change size, provide alternative text to display
Installation
With yarn
yarn add rn-avvvatars
With npm
npm install rn-avvvatars
Getting Started
Import Avvvatars to your app, then use it anywhere you want.
import Avvvatars from "rn-avvvatars";
export default function MyAvatar() {
return <Avvvatars value="[email protected]" />;
}
Customization
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" />
Figma
If you want to access design files to change something or customize it to your own, use our Figma File
License
MIT