1.2.0 • Published 6 years ago
@felixbores/react-avatar v1.2.0
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.