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

``bash
npm install --save lettered-avatar
`

Usage



Basic
`

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

!Generated Avatar
`

`
If imgSrc prop is passed then avatar will not be generated and original image will be shown with default options as follows:

!User Avatar

Advanced
`

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

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

$3

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.

License

Lettered Avatar is released under MIT license
MIT © hammadhere7