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.

License

MIT License