1.0.0 • Published 3 years ago

react-profile-avatar v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

react-profile-avatar

Render a user avatar with either their initials or an image.

NPM JavaScript Style Guide

Contents

Install

npm install --save react-profile-avatar

Usage

import React, { Component } from 'react'

import { Avatar } from 'react-profile-avatar'
import 'react-profile-avatar/dist/index.css'

class Example extends Component {
  render() {
    return (
      <Avatar 
        name={'John Doe'}
        colour={'#FF0000'}
      />
    )
  }
}

See the Examples for more info and advanced usage.

Build the Examples with npm install and then npm start to start the development server at http://localhost:3000.

Or view the online examples at https://darylbuckle.github.io/react-profile-avatar/.

Props

PropertyTypeDescription
namestringThe name of the User. Used in the title and used to calculate the initials.
initialsstringOverride the initials in the avatar. Recommended 2 characters max.
colourstring (hex e.g #000000)Change the background colour of the avatar.
imageSrcstringUrl of an image. If set this will replace the initials. This can also be a Base64 string.
sizenumberSize in pixels of the avatar. Default is 36px.
borderSizenumberAdd a border to the outside of the avatar. Shows if greater than 0. Size is in pixels.
borderColourstring (hex e.g #000000)Change the colour of the border.
onClickfunctionCallback when clicking on the avatar.
stylecss objectApply additional styles to the avatar circle.
classNamestringApply additional classes to the avatar circle.
borderStylecss objectApply additional styles to the border.
borderClassNamestringApply additional classes to the border.
containerStylecss objectApply additional styles to the container.
containerClassNamestringApply additional classes to the container.
childrenJSXRender child components within the avatar.

License

MIT © DarylBuckle 2021