Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/corllete/react-avatar
Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user. Fork of @Sitebase/react-avatar.
https://github.com/corllete/react-avatar
Last synced: 1 day ago
JSON representation
Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user. Fork of @Sitebase/react-avatar.
- Host: GitHub
- URL: https://github.com/corllete/react-avatar
- Owner: corllete
- Created: 2018-05-21T09:42:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-05-23T15:28:30.000Z (over 6 years ago)
- Last Synced: 2024-11-08T11:52:43.521Z (8 days ago)
- Language: JavaScript
- Size: 3.44 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# <Avatar>[](https://travis-ci.org/Sitebase/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.
## Demo
[Check it live!](https://www.sitebase.be/react-avatar/?utm_source=github&utm_medium=readme&utm_campaign=react-avatar)
## Install
Install the component using [NPM](https://www.npmjs.com/):
```sh
$ 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](https://github.com/sitebase/react-avatar/archive/master.zip).
## Usage
1. Import Custom Element:
```js
import Avatar from 'react-avatar';
```
2. Start using it!
```html
```
Some examples:
```html
```
## 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:
```sh
$ npm install
```
* Auto build new test version when developing that can be run with `grunt connect`:
```sh
$ npm run dev
```
* To test your project, start the development server and open `http://localhost:8000/index.html`.
```sh
$ python -m SimpleHTTPServer
```
## Products using React Avatar
* [BuboBox](https://www.bubobox.com/?utm_source=github&utm_medium=readme&utm_campaign=react-avatar)
* [Ambassify](https://www.ambassify.com/?utm_source=github&utm_medium=readme&utm_campaign=react-avatar)
## 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](https://github.com/sitebase/react-avatar/releases).
## License
[MIT License](http://opensource.org/licenses/MIT)