React-lettered-avatar NPM

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

React Lettered Avatar

Install `react-lettered-avatar`

npm install react-lettered-avatar --save

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}
    />
    ...
...