React Users Avatar

Install

npm install react-users-avatar --save

Demo

Usage

React users avatar example with image and border

import UserAvatar from 'react-users-avatar';

class ReactUsersAvathar extends Component {
    render() {
        return (
            <UserAvatar 
                imgUrl="https://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-512.png"
                avatharBgColor="#858aa0"
                avatharTextColor="#fff"
                name="full name"
                border="5px solid #474d56"
                ifBorder
                imgHeight="150px"
                imgWidth="150px"
            />
        );
    }
}

React users avatar example with out image and with out border

import UserAvatar from 'react-users-avatar';

class ReactUsersAvathar extends Component {
    render() {
        return (
            <UserAvatar 
                  avatharBgColor="#858aa0"
                  avatharTextColor="#fff"
                  name="Thamu"
                  border="5px solid #474d56"
                  ifBorder={false}
                  imgHeight="150px"
                  imgWidth="150px"
            />
        );
    }
}

React users avatar example with out image and with border

import UserAvatar from 'react-users-avatar';

class ReactUsersAvathar extends Component {
    render() {
        return (
            <UserAvatar 
                  avatharBgColor="red"
                  avatharTextColor="#fff"
                  name="Nithi"
                  border="5px solid #474d56"
                  ifBorder
                  imgHeight="150px"
                  imgWidth="150px"
            />
        );
    }
}

React users avatar example with out image, with border and with out background

import UserAvatar from 'react-users-avatar';

class ReactUsersAvathar extends Component {
    render() {
        return (
            <UserAvatar 
                  avatharBgColor="#fff"
                  avatharTextColor="green"
                  name="Thamu Nithi"
                  border="5px solid #474d56"
                  ifBorder
                  imgHeight="150px"
                  imgWidth="150px"
            />
        );
    }
}

PROPTYPES

| Prop | Type | Default | | ---- | ---- | ------- | | imgUrl | String | '' | | avatharBgColor | String | #858aa0 | | avatharTextColor | String | #fff | | name | String | avatar | | border | String | 5px solid #474d56 | | ifBorder | Boolean | true | | imgHeight | String | 150px | | imgWidth | String | 150px |

react-users-avatar