React Avatar
A simple component that renders an user avatar using a picture with a fallback system that renders a SVG image based on user's name or initials in case of the configured picture failed to load.
Installation
npm install @felixbores/react-avatar --save
You need to install react
, prop-types
and styled-components
libraries by yourself, as they are peer dependencies
Usage
Import Avatar element:
import Avatar from "@felixbores/react-avatar";
How to use:
<Avatar size={48} name="John Smith" />
<Avatar size={90} name="George Jungle" src="http://i.pravatar.cc/90" />
<Avatar size={120} initials="ST" url="http://i.pravatar.cc/120" border={3} />
<Avatar size={120} name="BJ" />
<Avatar size={60} name="Jane Doe" bgColor="#FFF" fgColor="#000" />
<Avatar size={256} name="Fred Rock" border={2} borderColor="lightgreen" />
Component Props
Prop | Type | Default | Description |
---|---|---|---|
className |
string | Class names to be added to the avatar | |
size |
number | 60 | Size of the avatar |
border |
number | 0 | Border size of the avatar |
initials |
string | The initials to show as text when avatar is text based | |
name |
string | If initials is not present, the name will be used to generate user initials |
|
bgColor |
string | #000000 | The background color when the avatar is text based |
fgColor |
string | #ffffff | The text color when the avatar is text based |
borderColor |
string | #ffffff | The border color of the avatar |
rounded |
bool | false | Display the avatar as a circle |
url |
string | Url to load image using ajax. The image is converted to base64 | |
src |
string | Used as traditional src image attribute. Will be used only if url was not defined or failed to load |
|
onClick |
function | Mouse click event | |
onContextMenu |
function | Mouse contextmenu event | |
onDoubleClick |
function | Mouse dblclick event | |
onMouseDown |
function | Mouse mousedown event | |
onMouseEnter |
function | Mouse mouseenter event | |
onMouseLeave |
function | Mouse mouseleave event | |
onMouseOut |
function | Mouse mouseout event | |
onMouseOver |
function | Mouse mouseover event | |
onMouseUp |
function | Mouse mouseup event | |
randomBgColor |
array of colors | Determine a random background color from the array input based on name or initials props |
|
randomBgColor |
string | Determine a random background color from the palette input based on name or initials props. The valid palette options are: social , material, flat, metro and fluent
|
|
randomBgColor |
bool | Determine a random background color from social palette based on name or initials props |
In case name
and initials
were not set, and images from url
or src
were not set or failed to load, a placeholder image is used.