@0x111/react-user-avatar 中文文档教程
React UserAvatar
一个简单的用户头像显示，支持回退到使用彩色背景上的用户首字母作为头像。
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" />
此模块使用 react-style 内联样式来缩小 api，但允许通过公开合理的可扩展性 一些 DOM 类。 查看（或简单地使用）example.css 以获取想法。
可以通过传入 color 属性来设置后备头像的颜色，或者您可以自定义颜色范围 通过传入一个 colors 数组来使用。 该组件使用简单的计算来始终如一地使用相同的 每次都为同一个用户名设置颜色。
如果该组件确定所选颜色在视觉上是浅色的，它将向根元素应用 UserAvatar-light 类。 如果选择的颜色是深色，它将应用 UserAvatar-light。 利用这些来使用适当颜色的文本或边框 在设置组件样式时。
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 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.
