Universal React avatar component makes it possible to generate avatars based on user information

by React

react-avatar

Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user. We use a fallback system that if for example an invalid Facebook ID is used it will try Google, and so on.

For the moment we support following types:

  • Facebook
  • Google
  • Twitter
  • Vkontakte
  • Skype
  • Gravatar
  • Custom image
  • Name initials

The fallbacks are in the same order as the list above were Facebook has the highest priority.

Live Demo

https://www.sitebase.be/react-avatar/?utm_source=github&utm_medium=readme&utm_campaign=react-avatar

Install

Install the component using NPM:

$ npm install react-avatar --save

Or download as ZIP.

Usage

  1. Import Custom Element:

    import Avatar from 'react-avatar';

  2. Start using it!

    <Avatar name="Foo Bar" />

Some examples:

<Avatar googleId="118096717852922241760" size="100" round="true" />
<Avatar facebookId="100008343750912" size="150" />
<Avatar vkontakteId="1" size="150" />
<Avatar skypeId="sitebase" size="200" />
<Avatar twitterHandle="sitebase" size="40" />
<Avatar name="Wim Mostmans" size="150" />
<Avatar name="Wim Mostmans" size="150" textSizeRatio="1.75" />
<Avatar value="86%" size="40" />
<Avatar size="100" facebook-id="invalidfacebookusername" src="http://www.gravatar.com/avatar/a16a38cdfe8b2cbd38e8a56ab93238d3" />

GitHub