<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.

Demo

Check it live!

Install

Install the component using NPM:

$ npm install react-avatar --save

# besides React, react-avatar also has react-addons-shallow-compare and prop-types
# as peer dependencies, make sure to install the correct version
# for your version of react
$ npm install react-addons-shallow-compare@^0.14 --save
# OR
$ npm install react-addons-shallow-compare@^15 --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" />
<Avatar name="Wim Mostmans" unstyled="true" />

Options

| Attribute | Options | Default | Description | | ------------- | ----------------- | ------- | ------------------------------------------------------------------------------------------------------ | | className | string | sb-avatar | Name of the CSS class you want to add to this component. | | email | string | | String of the email address of the user. You can also provide an MD5 hash. | | facebook-id | string | | | | twitter-handle | string | | | | google-id | string | | | | skype-id | string | | | | name | string | | Will be used to generate avatar based on the initials of the person | | maxInitials | number | | Set max nr of characters used for the initials. If maxInitials=2 and the name is Foo Bar Var the initials will be FB | | value | string | | Show a value as avatar | | color | string | random | Used in combination with name and value. Give the background a fixed color with a hex like for example #FF0000 | | fgColor | string | #FFF | Used in combination with name and value. Give the text a fixed color with a hex like for example #FF0000 | | size | number | 50 | Size of the avatar | | unit | string | px | Unit of measure of the size (px, em, rem...) | | textSizeRatio | number | 3 | For text based avatars the size of the text as a fragment of size (size / textSizeRatio) | | round | bool | false | Round the avatar corners | | borderRadius | string | 100% | The value of border radius, default is circle | | src | string | | Fallback image to use | | style | object | | Style that will be applied on the root element | | fontFamily | string | Helvetica, Arial, sans-serif | The font that will be used on text rendering | | valign | string | baseline | The vertical align style value | | unstyled | bool | false | Disable all styles | | onClick | function | | Mouse click event |

Development

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

• Install local dependencies:

  $ npm install

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

  $ npm run dev

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

  $ python -m SimpleHTTPServer

Products using React Avatar

• BuboBox
• Ambassify

Contributing

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

History

For detailed changelog, check Releases.

License

MIT License