React Avatar Gradient
A simple, customizable React Avatar component that generates avatars with initials on a pastel background color.
Features
- Displays user initials on a pastel-colored background
- Color is consistently generated based on the user's name
- Customizable size
- Shape options: circle or square
- TypeScript support
Installation
npm install react-avatar-gradient
# or
yarn add react-avatar-gradient
Usage Avatar
import React from 'react';
import { Avatar } from 'react-avatar-gradient';
function App() {
return (
<div className="App">
{/* Default avatar (circle, size 40px) */}
<Avatar title="John Doe"/>
{/* Custom size */}
<Avatar title="Jane Smith" size={60} />
{/* Square shape */}
<Avatar title="Alex Johnson" shape="square" color="#FFB6C1"/>
</div>
);
}
export default App;
Usage AvatarGroup
import React from "react";
import { AvatarGroup } from "react-avatar-gradient";
function App() {
return (
<div className="App">
{/* Default avatar (circle, size 40px) */}
<AvatarGroup avatars={["John Doe", "Jane Smith", "Alex Johnson"]} />
{/* Custom size and color */}
<AvatarGroup avatars={["Michael Brown", "Sara Lee"]} size={60} color="#FFB6C1" />
{/* Square shape */}
<AvatarGroup avatars={["Chris Evans", "Emily Davis"]} shape="square" color="#E0BBE4" />
</div>
);
}
export default App;
Props
| Prop | Type | Default | Description |
|---|
title | string | (required) | The user's name used to generate initials and background color |
size | number | 40 | Size of the avatar in pixels |
shape | 'circle' | 'square' | 'circle' | Shape of the avatar |
color | string | '#FFB6C1' | Color of the avatar |
How It Works
The component extracts the first letter from each word in the title prop (up to 2 letters) and displays them as initials. The background color is a pastel color generated deterministically from the title string, ensuring the same name always gets the same color.
License
MIT License
