Postget-react-avatar NPM

<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

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" />

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

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

Contributing

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

History

For detailed changelog, check Releases.

License

MIT License

component reactjs react-component avatar

babel-runtime is-retina md5

@everything-registry/sub-chunk-2462 @infinitebrahmanuniverse/nolb-postg @zalastax/nolb-postg

2.5.1

6 years ago