@hashup/react-simple-avatar

A simple React avatar component to display either their avatars or their initials

View DEMO

Install

npm install --save @hashup/react-simple-avatar

Usage

//
// React class
//
import React, { Component } from 'react'

import Avatar from '@hashup/react-simple-avatar'
import '@hashup/react-simple-avatar/dist/index.css'

class Example extends Component {
  render() {
    return <Avatar name="Denis" />
  }
}

//
// React function
//
import React, { Component } from 'react'

import Avatar from '@hashup/react-simple-avatar'
import '@hashup/react-simple-avatar/dist/index.css'

const MyApp = () => {
  return <Avatar name="Denis" />
}

Attributes

Name	Default	Type	Description
name	""	String	Name of the person
avatarUrl	""	String	URL for the avatar (will revert to color and initial if image can't load)
className	""	String	Add your own CSS class name to the wrapper
size	50	Number	Size in pixels of the avatar
borderRadius	50%	String	Border radius of the avatar in pixels
backgroundColor	"#8E8E8E"	String	Background color for initials
textColor	"#F1F1F1"	String	Text color for the initials
enableTooltip	true	Bool	Enable tooltips on mouse over of the avatar
tooltipDirection	"top"	String	Options: top, bottom, left, right
tooltipTextColor	"#FFFFFF"	String	Text color for the tooltip
tooltipBackgroundColor	"#000000"	String	Background color for the tooltip
tooltipMargin	30	Number	Offset of the tooltip
tooltipArrowSize	6	Number	Size of the arrow
tooltipDelay	200	Number	Delay before the tooltip appears
style	{}	Object	Pass custom styles to the wrapper

License

MIT © desduvauchelle

Notes to self

To publish on npm:

npm publish