react-lettered-avatar

react-lettered-avatar

React Lettered Avatar is a component that generates an avatar based on the user's initials. You can set the color of text, background color, and you can also set an array of colors for the background. There are also other props (you can see this below), if there are no options that you need, you can always use the CSS to style the component.

Demo

Demo on codesandbox

Install react-lettered-avatar

npm install react-lettered-avatar --save

or

yarn add react-lettered-avatar --save

How to use

import React from 'react';
import LetteredAvatar from 'react-lettered-avatar';

function App() {
    ...
    return(
        <LetteredAvatar
            name="Lettered Avatar"
        />
    )
}
...

Props and Features

Prop	Type	Default	Example	Description
name (required)	string	Lettered Avatar	name="Name Surname" or name="N S"	Field with name, surname or user's initials (with space beetween letters, how a diff words)
color	string	white or black (see Features below)	color=#ff0000 or color=rgb('255,255,255)	Color of text. You can use HEX or RGB color types.
size	number	48	size={100}	Size of text container.
backgroundColor	string	Depends on the initials	backgroundColor="#ff0000" or backgroundColor="rgb(255,255,255)"	Set one color for all users.
backgroundColors	array	Default colors by Package	const colors = ['rgb(41,41,41)','#1abc9c']	Set the range of your colors as array. Color is determined by the initials (name). Color will be consistent for the user.
radius	number	Equal to size prop	size={100}	Border radius for text container.

More Examples

    import LetteredAvatar from 'react-lettered-avatar';
    ...
    const arrayWithColors = [
        '#2ecc71',
        '#3498db',
        '#8e44ad',
        '#e67e22',
        '#e74c3c',
        '#1abc9c',
        '#2c3e50'
    ];
    ...
    <LetteredAvatar
        name="Lettered Avatar"
        size={100}
        radius={20}
        color="#fff"
        backgroundColor="rgb(55,55,22)"
        <!--or-->
        backgroundColors={arrayWithColors}
    />
    ...
...

License

react-lettered-avatar is MIT licensed.

Enjoy using!