Lettered avatar is a small react component that generates profile avatars based on name of the person. Avatars are generated via HTML5 canvas API and converted to dataURI for image source. The user can also specify profile avatar's path if that exists. In that case lettered avatar is not generated rather image is used. Currently it creates a consistent colored avatar for English Alphabets A to Z and digits from 0-9. For any other letter apart from these the generated avatar will be in default color.
- Lettered avatar with first letter of given name by default
- Support for creating two letters avatar by taking first letter of given name and surname
- Support for specifying background color of avatar of your choice
- Support for making the avatar clickable by passing href value
- Fallback for creating letter avatar when profile image does not exist. So you don't have to manage that in your application.
- Support for rounded or square avatar
- Setting the size of the generated avatar with props
npm install --save lettered-avatar
Import package into your app
import LetteredAvatar from 'lettered-avatar';
Basic
<LetteredAvatar name={'Hammad'}/>
Specifying the name prop will generate the avatar from first letter of name as follows:
<LetteredAvatar name={'Hammad'} imgSrc={'img/user_avatar.png'}/>
If imgSrc prop is passed then avatar will not be generated and original image will be shown with default options as follows:
Advanced
<LetteredAvatar name={'Hammad'} options={{
size: 100,
twoLetter: true,
shape: 'square',
bgColor: '',
href: '',
target: '_blank',
tooltip: false,
tooltipTitle: 'CEO Avatar',
imgClass: 'image-responsive user-image',
imgWidth: 150,
imgHeight: 100
}}/>
name | type | default | description |
---|---|---|---|
name | String | The name comprising given name and surname. First letter of each name will be used to create avatar | |
imgSrc | String | The URL of the image to show instead of avatar. If this prop is set then no avatar will be generated and imgSrc will be shown as avatar. This must be a valid image URL. | |
options | Object | Additional props to configure avatar properties |
name | type | default | description |
---|---|---|---|
size | Integer | 60 | Width and height of generated avatar |
twoLetter | Boolean | false | Whether to make avatar of first letter of given name to include surname's first letter too. |
shape | String ('round','square') | round | The shape of avatar or given users image. |
bgColor | String | Background color of the avatar. The component assigns particular color to each letter. If you want to override the color then set this property. | |
letterColor | String | #FFFF | The color of letter in avatar. |
href | String | Whether to make avatar clickable. If this property is set then upon click of avatar user will be taken this this prop | |
target | String ('_blank','_parent','_self','_top') | _self | Where to open the href link when clicked on avatar. Works only when href property is set |
tooltip | Boolean | true | Shows tooltip on hover on avatar |
tooltipTitle | String | name | Text to show when avatar or image is hovered. By default it shows full text passed in name prop |
imgClass | String | The class you want image tag to take | |
imgWidth | Integer | size | The width of the image you want to set. This works only imgHeight is set as well and path property is valid image. |
imgHeight | Integer | size | The height of the image you want to set. This works only imgWidth is set as well and path property is valid image. |
Lettered Avatar is released under MIT license
MIT © hammadhere7