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
• Skype
• Gravatar
• Name initials
• Custom text
• Custom image

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

Check it live!

Install the component using NPM:

$ npm install react-avatar --save

Or download as ZIP.

1. Import Custom Element:

   var Avatar = require('react-avatar');

2. Start using it!

   <Avatar />

Some examples:

<Avatar google-id="118096717852922241760" size="100" round="true" />
<Avatar facebook-id="100008343750912" size="150" />
<Avatar skype-id="sitebase" size="200" />
<Avatar name="Wim Mostmans" size="150" />
<Avatar value="86%" size="40" />
<Avatar size="100" facebook-id="invalidfacebookusername" src="http://www.gravatar.com/avatar/a16a38cdfe8b2cbd38e8a56ab93238d3" />

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

• Install Grunt:

  $ [sudo] npm install -g grunt-cli

• Install local dependencies:

  $ npm install

• Auto build new test version when developing that can be run with grunt connect:

  $ grunt watch

• To test your project, start the development server and open http://localhost:8000.

  $ grunt connect

• To provide a live demo, send everything to gh-pages branch.

  $ grunt deploy

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

For detailed changelog, check Releases.

MIT License

• Add Jest unit tests