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!