
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
@radix-ui/react-avatar
Advanced tools
View docs [here](https://radix-ui.com/primitives/docs/components/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.
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
View docs here.
FAQs
View docs [here](https://radix-ui.com/primitives/docs/components/avatar).
The npm package @radix-ui/react-avatar receives a total of 5,011,788 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.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.