Avatar

Avatar is a customizable React component for displaying user avatars with various styling options. It's written in TypeScript for better type safety and maintainability.

Features

• Customizable appearance (variant, size, colors)
• Supports image and text avatars
• Optional badge support
• Grouped avatars
• TypeScript support for type safety

Installation

To use the Avatar component in your React application, install it via npm:

npm install @droid-tech/react-ts-avatar

Usage

To use the Avatar component, import it and provide the required props:

import { Avatar } from "@droid-tech/react-ts-avatar";

<Avatar
  variant="circular"
  type="image"
  src="path/to/image.jpg"
  alt="User Avatar"
  size={48}
  fontSize={20}
  color="#fff"
  bgcolor="#bdbdbd"
  badgeContent="!"
  badgeColor="#fff"
  badgeBgColor="#bdbdbd"
  badgeSize={20}
  group={false}
/>;

Props

The Avatar component accepts the following props:

| Prop | Type | Required | Description | |------------------|-----------------------|----------|------------------------------------------------------------------| | variant | AvatarVariant | No | The shape of the avatar (circular, rounded, square) | | type | AvatarType | No | The type of the avatar (image, text) | | src | string | No | The source URL of the image (required if type is image) | | alt | string | No | The alt text for the image | | children | React.ReactNode | No | The content to display if type is text | | size | number | No | The size of the avatar | | fontSize | number | No | The font size of the text | | color | string | No | The text color | | bgcolor | string | No | The background color | | badgeContent | React.ReactNode | No | The content to display in the badge | | badgeColor | string | No | The text color of the badge | | badgeBgColor | string | No | The background color of the badge | | badgeSize | number | No | The size of the badge | | group | boolean | No | Whether the avatar is part of a group |

The Avatar component provides a flexible and customizable way to display user avatars in your React application. With its various styling options and TypeScript support, it can easily be integrated into your project and styled to match your design requirements.

License

This project is licensed under the MIT License.