Super Avatar

A lightweight, customizable React component for displaying user avatars with fallback to initials when no image is available.

Features

• 🖼️ Image Support: Display user profile images with error handling
• 🔤 Initials Fallback: Automatically generates colored initials when no image is provided
• 🎨 Smart Color Generation: Uses a predefined color palette for consistent visual appeal
• 📱 Responsive Design: Fully customizable dimensions and styling
• ♿ Accessibility: Proper alt text and semantic markup
• 🚀 Lightweight: Minimal dependencies and optimized bundle size

Installation

npm install super-avatar

or

yarn add super-avatar

Usage

Basic Usage

import SuperAvatar from 'super-avatar';

function UserProfile() {
  return (
    <SuperAvatar
      firstName="John"
      lastName="Doe"
      imgSrc="https://example.com/profile.jpg"
    />
  );
}

With Fallback to Initials

import SuperAvatar from 'super-avatar';

function UserProfile() {
  return (
    <SuperAvatar
      firstName="Jane"
      lastName="Smith"
      // No imgSrc provided - will show "JS" initials
    />
  );
}

Custom Styling

import SuperAvatar from 'super-avatar';

function UserProfile() {
  return (
    <SuperAvatar
      firstName="Alice"
      lastName="Johnson"
      height="50"
      width="50"
      fontSize="18"
      borderRadius="8px"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | imgSrc | string | undefined | URL of the user's profile image. If not provided or equals 'None', initials will be displayed | | firstName | string | '' | User's first name for generating initials | | lastName | string | '' | User's last name for generating initials | | fontSize | string | '14' | Font size for the initials (in pixels) | | alt | string | "${firstName}'s profile pic" | Alt text for the image | | height | string | '30' | Height of the avatar (in pixels) | | width | string | '30' | Width of the avatar (in pixels) | | borderRadius | string | '50%' | Border radius for styling (use '50%' for circular, '8px' for rounded square, etc.) |

Color Palette

The component uses a predefined color palette for initials backgrounds. Each letter gets a consistent color:

• A: #986f0b (Dark Gold)
• B: #7a7574 (Gray)
• C: #986f0b (Dark Gold)
• D: #a4262c (Red)
• E: #8764b8 (Purple)
• F: #038759 (Green)
• G: #881798 (Magenta)
• H: #4a154a (Dark Purple)
• I: #8764b8 (Purple)
• J: #7a7574 (Gray)
• K: #881798 (Magenta)
• L: #038759 (Green)
• M: #8764b8 (Purple)
• N: #038759 (Green)
• O: #a4262c (Red)
• P: #5a003a (Dark Red)
• Q: #986f0b (Dark Gold)
• R: #ca5010 (Orange)
• S: #038759 (Green)
• T: #038387 (Teal)
• U: #7a7574 (Gray)
• V: #c239b3 (Pink)
• W: #881798 (Magenta)
• X: #8764b8 (Purple)
• Y: #986f0b (Dark Gold)
• Z: #7a7574 (Gray)

If a letter doesn't have a predefined color, it defaults to a pink background (#c239b3).

Examples

Circular Avatar

<SuperAvatar
  firstName="John"
  lastName="Doe"
  height="60"
  width="60"
  fontSize="20"
  borderRadius="50%"
/>

Rounded Square Avatar

<SuperAvatar
  firstName="Jane"
  lastName="Smith"
  height="40"
  width="40"
  fontSize="16"
  borderRadius="8px"
/>

Large Avatar with Image

<SuperAvatar
  firstName="Alice"
  lastName="Johnson"
  imgSrc="https://example.com/alice-profile.jpg"
  height="100"
  width="100"
  fontSize="32"
  borderRadius="50%"
/>

Browser Support

• React 16.8+ (uses React Hooks)
• Modern browsers with ES6+ support
• IE11+ (with appropriate polyfills)