Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
@fluentui/react-avatar
Advanced tools
@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.
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>
);
}
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 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.
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.
React Avatar components for Fluent UI
The Avatar component represents a person or entity. It displays the person's image, initials, or an icon, and can be either circular or square.
To import Avatar:
import { Avatar } from '@fluentui/react-components';
<Avatar name="Miguel Garcia" />
<Avatar size={72} name="Mona Kane" image="./MonaKane.jpg" />
<Avatar shape="square" icon={<IDBadgeIcon />} />
Displaying a badge:
<Avatar name="Allan Munger" badge={<PresenceBadge status="busy">} />
With active state indication:
<Avatar name="Daisy Phillips" active={true} activeAppearance="ring-shadow" />
<Avatar name="Robin Counts" active={false} activeAppearance="ring-shadow" />
See Fluent UI Storybook for more detailed usage examples.
Alternatively, run Storybook locally with:
yarn start
react-avatar
from the list.See SPEC.md.
If you're upgrading to Fluent UI v9 see MIGRATION.md for guidance on updating to the latest Avatar implementation.
FAQs
React components for building Microsoft web experiences.
The npm package @fluentui/react-avatar receives a total of 29,801 weekly downloads. As such, @fluentui/react-avatar popularity was classified as popular.
We found that @fluentui/react-avatar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.