@fluentui/react-avatar

What is @fluentui/react-avatar?

@fluentui/react-avatar is a React component library for creating and displaying avatars. It is part of the Fluent UI suite, which provides a consistent design language and components for building user interfaces. The package allows for customization and styling of avatars, including support for different sizes, shapes, and image sources.

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

Basic Avatar

This feature allows you to create a basic avatar with a name. The avatar will display the initials of the name provided.

import { Avatar } from '@fluentui/react-avatar';

function BasicAvatar() {
  return <Avatar name="John Doe" />;
}

Avatar with Image

This feature allows you to create an avatar with a custom image. You can provide the image source URL to display a specific image.

import { Avatar } from '@fluentui/react-avatar';

function AvatarWithImage() {
  return <Avatar image={{ src: 'https://example.com/johndoe.jpg' }} name="John Doe" />;
}

Avatar Sizes

This feature allows you to create avatars of different sizes. You can specify the size in pixels to adjust the avatar's dimensions.

import { Avatar } from '@fluentui/react-avatar';

function AvatarSizes() {
  return (
    <div>
      <Avatar name="John Doe" size={24} />
      <Avatar name="John Doe" size={48} />
      <Avatar name="John Doe" size={72} />
    </div>
  );
}

Avatar Shapes

This feature allows you to create avatars with different shapes. You can choose between 'square' and 'circular' shapes.

import { Avatar } from '@fluentui/react-avatar';

function AvatarShapes() {
  return (
    <div>
      <Avatar name="John Doe" shape="square" />
      <Avatar name="John Doe" shape="circular" />
    </div>
  );
}

Other packages similar to @fluentui/react-avatar

react-avatar

react-avatar is a versatile avatar component library for React. It supports various avatar types, including initials, images, and icons. Compared to @fluentui/react-avatar, react-avatar offers more flexibility in terms of avatar types and customization options.

material-ui

Material-UI is a popular React component library that follows Google's Material Design guidelines. It includes an Avatar component that supports images, icons, and text. While Material-UI provides a broader range of UI components, its Avatar component is similar in functionality to @fluentui/react-avatar.

antd

Ant Design (antd) is a comprehensive UI component library for React. It includes an Avatar component that supports images, icons, and text. Ant Design's Avatar component is comparable to @fluentui/react-avatar in terms of features and customization options.

README

@fluentui/react-avatar

React Avatar components for Fluent UI

These are not production-ready components and should never be used in product. This space is useful for testing new components whose APIs might change before final release.

To import ReactAvatar components:

import { ComponentName } from '@fluentui/react-avatar';

Once the Avatar component graduates to a production release, the component will be available at:

import { ComponentName } from '@fluentui/react';