react-user-avatar
Version:
React component for a user avatar with fallback to colored initials
32 lines (22 loc) • 1.51 kB
Markdown
# 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
```js
<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 colors chosen was dark, it will apply `UserAvatar-light`. Take advantage of these to use the appropriately colored text or border
when styling the component.