Package Exports

react-avatar-gradient
react-avatar-gradient/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-avatar-gradient) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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