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

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;

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.

Live Demo

You can see a live demo of the component here.

License

MIT License