@radix-ui/react-avatar

What is @radix-ui/react-avatar?

@radix-ui/react-avatar is a React component library for creating customizable avatar components. It provides a simple and flexible way to display user avatars with support for fallback images and initials.

What are @radix-ui/react-avatar's main functionalities?

Basic Avatar

This code demonstrates how to create a basic avatar with an image and a fallback initial using @radix-ui/react-avatar.

```jsx
import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';

function BasicAvatar() {
  return (
    <Avatar>
      <AvatarImage src="https://example.com/user.jpg" alt="User" />
      <AvatarFallback>U</AvatarFallback>
    </Avatar>
  );
}
```

Custom Size Avatar

This code shows how to create an avatar with a custom size by applying a custom CSS class.

```jsx
import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';
import './styles.css'; // Assume this file contains the custom size styles

function CustomSizeAvatar() {
  return (
    <Avatar className="custom-avatar-size">
      <AvatarImage src="https://example.com/user.jpg" alt="User" />
      <AvatarFallback>U</AvatarFallback>
    </Avatar>
  );
}
```

Avatar with Fallback Image

This code demonstrates how to use a fallback image when the main avatar image fails to load.

```jsx
import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';

function AvatarWithFallbackImage() {
  return (
    <Avatar>
      <AvatarImage src="https://example.com/nonexistent.jpg" alt="User" />
      <AvatarFallback>
        <img src="https://example.com/fallback.jpg" alt="Fallback" />
      </AvatarFallback>
    </Avatar>
  );
}
```

Other packages similar to @radix-ui/react-avatar

react-avatar

react-avatar is a library for generating avatars with support for Gravatar, custom images, and initials. It offers a variety of customization options and is easy to use. Compared to @radix-ui/react-avatar, react-avatar provides more built-in options for avatar sources but may not be as flexible in terms of styling.

material-ui

Material-UI is a popular React UI framework that includes an Avatar component. The Avatar component in Material-UI is highly customizable and integrates well with the rest of the Material-UI ecosystem. While it offers a robust set of features, it may be overkill if you only need a simple avatar component.

react-user-avatar

react-user-avatar is a lightweight library for generating user avatars with initials. It is simple to use and focuses on providing a straightforward solution for displaying user initials as avatars. Compared to @radix-ui/react-avatar, it is less feature-rich but may be sufficient for basic use cases.

README

react-avatar

Installation

$ yarn add @radix-ui/react-avatar
# or
$ npm install @radix-ui/react-avatar

Usage

View docs here.