Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@radix-ui/react-avatar
Advanced tools
@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.
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>
);
}
```
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 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 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.
react-avatar
$ yarn add @radix-ui/react-avatar
# or
$ npm install @radix-ui/react-avatar
View docs here.
FAQs
Unknown package
The npm package @radix-ui/react-avatar receives a total of 810,697 weekly downloads. As such, @radix-ui/react-avatar popularity was classified as popular.
We found that @radix-ui/react-avatar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.