Skip to content

React component for a user avatar with fallback to colored initials

License

Notifications You must be signed in to change notification settings

wbinnssmith/react-user-avatar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

  <UserAvatar size="48" name="Will Binns-Smith" />
  <UserAvatar size="48" name="Will Binns-Smith" src="https://pbs.twimg.com/profile_images/429442426038538240/6Ac9kykG_400x400.jpeg" />
  <UserAvatar size="48" name="John Doe" colors={['#ccc', '#fafafa', '#ccaabb']}/>
  <UserAvatar size="48" name="Mary Ann Gilligans" />
  <UserAvatar size="48" name="Jane Doe" color="#FFF" />
  <UserAvatar size="48" name="Madonna" />

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.

About

React component for a user avatar with fallback to colored initials

Resources

License

Stars

Watchers

Forks

Packages

No packages published