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

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


tutorials -

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

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff