Lettered Avatar

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.

Features

• 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

Install

npm install --save lettered-avatar

Usage

Basic

<LetteredAvatar name={'Hammad'}/>  

Specifying the name prop will generate the avatar from first letter of name as follows:

<LetteredAvatar name={'Hammad'} imgSrc={'https://avatars2.githubusercontent.com/u/4178933'}/>  

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

API

Props

options prop

License

Lettered Avatar is released under MIT license MIT © hammadhere7