@makozi/react-user-avatar-generator

Dynamically generates placeholder avatars using initials, random colors, or uploaded images. Ideal for social platforms and apps with profiles.

Features

• Generate avatars from initials or uploaded images
• Random background colors or custom themes
• Supports circle or square shapes
• Auto fallback to initials if image fails
• SVG/Canvas-ready
• Lightweight and customizable

Installation

npm install @makozi/react-user-avatar-generator

or

yarn add @makozi/react-user-avatar-generator

Usage

import { Avatar } from "@makozi/react-user-avatar-generator";

export default function App() {
  return (
    <div>
      <Avatar name="John Doe" size={60} />
      <Avatar name="Jane Smith" src="https://example.com/avatar.jpg" size={60} shape="square" />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |-----------------|--------------------------|-------------|------------------------------------| | name | string | "User" | Name used to generate initials | | src | string | null | Image URL to display | | size | number | 50 | Avatar size in pixels | | shape | "circle" or "square" | "circle" | Shape of the avatar | | backgroundColor | string | random | Background color | | textColor | string | #fff | Initials text color | | fontSize | number | 18 | Font size for initials | | style | object | {} | Custom CSS styles |

HomePage

Project Home: https://github.com/makozi/react-user-avatar-generator

Repository

Repository: https://github.com/makozi/react-user-avatar-generator

License

MIT © Makozi Marizu-Ibewiro