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:
- Vkontakte
- Skype
- Gravatar
- Custom image
- Name initials
The fallbacks are in the same order as the list above were Facebook has the highest priority.
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 --saveOr download as ZIP.
-
Import Custom Element:
import Avatar from 'react-avatar';
-
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" />| 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 |
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 |
src |
string | Fallback image to use | |
style |
object | Style that will be applied on the root element | |
unstyled |
bool | false | Disable all styles |
onClick |
function | Mouse click event |
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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
For detailed changelog, check Releases.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent