Need help with react-user-avatar?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

wbinnssmith
138 Stars 23 Forks MIT License 37 Commits 9 Opened issues

Description

React component for a user avatar with fallback to colored initials

Services available

!
?

Need anything else?

Contributors list

No Data

React UserAvatar

A bare-bones user avatar display with support for falling back to using the user's initials on a colored background as the avatar.

Installation

npm install -S react-user-avatar

Usage

  
  
  
  
  
  

This module uses react-style inline styles to narrow the api, yet allows for reasonable extensibility by exposing a number of DOM classes. Take a look (or simply use)

example.css
for ideas.

The fallback avatar's color may be set by passing in the

color
prop, or you can customize the range of colors used by passing in an array of
colors
. The component uses a simple calculation to consistently use the same color for the same user's name every time.

If the component determines that the color chosen was visually light, it will apply a

UserAvatar--light
class to the root element. If the color chosen was dark, it will apply
UserAvatar--dark
. Take advantage of these to use the appropriately colored text or border when styling the component.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.