react-profile-avatar

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

Contents

• Install
• Usage
• Props
• License

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

| Property | Type | Description | | -------- |------| ------------| | name | string | The name of the User. Used in the title and used to calculate the initials. | initials | string | Override the initials in the avatar. Recommended 2 characters max. | colour | string (hex e.g #000000) | Change the background colour of the avatar. | imageSrc | string | Url of an image. If set this will replace the initials. This can also be a Base64 string. | size | number | Size in pixels of the avatar. Default is 36px. | borderSize | number | Add a border to the outside of the avatar. Shows if greater than 0. Size is in pixels. | borderColour | string (hex e.g #000000) | Change the colour of the border. | onClick | function | Callback when clicking on the avatar. | style | css object | Apply additional styles to the avatar circle. | className | string | Apply additional classes to the avatar circle. | borderStyle | css object | Apply additional styles to the border. | borderClassName | string | Apply additional classes to the border. | containerStyle | css object | Apply additional styles to the container. | containerClassName | string | Apply additional classes to the container. | children | JSX | Render child components within the avatar.

License

MIT © DarylBuckle 2021