DocsDeveloper

User Avatar

Component Type: Default

Overview

The User Avatar component is a versatile and reusable React component designed to display user profile images with ease. With customizable size, alt text, and optional className properties, this component offers flexibility in adapting to various design requirements. Leveraging the power of Next.js' Image component, User Avatar ensures optimized loading and rendering of images while maintaining a sleek and polished appearance. Whether used in social networking applications, user profiles, or online communities, User Avatar simplifies the integration of profile images, enhancing the visual appeal and user experience of web applications.

Demo

User profile image
User profile image
User profile image
User profile image

Easy CLI Install

Component Type: Default

jrui add userAvatar

Props

The UserAvatar component accepts the following props for controlling its appearance and behavior:

  • size: (number)
    The size of the user avatar in pixels. Defaults to 50 if not provided.
  • className: (string)
    Additional CSS classes to apply to the user avatar for custom styling.
  • alt: (string)
    The alternative text for the user avatar image, used for accessibility purposes.
  • img: (string | StaticImageData)
    The source of the image for the user avatar. This can be a URL string or a StaticImageData object.

Props Demo

User profile image

Component Files

Component Type: Default

components > UserAvatar.tsx

import React from "react";
import Image, { StaticImageData } from "next/image";

interface UserAvatarProps {
  size?: number;
  className?: string;
  alt?: string;
  img: string | StaticImageData;
}

function UserAvatar({
  size = 50,
  className,
  alt = "User profile image",
  img,
}: UserAvatarProps) {
  return (
    <Image
      alt={alt}
      src={img}
      width={size}
      height={size}
      className={`${className} shadow-sm border rounded-full`}
      loading="lazy"
    />
  );
}

export default UserAvatar;

Example Use Case

Component Type: Default

Example.tsx

import React from "react";
import UserAvatar from "@/components/UserAvatar"; // Adjust the import path based on your project structure
import Img from '@/imgs/yourImg.png';

const Example: React.FC = () => {
  return (
    <Reveal className="center h-[80dvh]">
      <UserAvatar
        img={Img}
        size={200}
        alt="This is my alt text"
        className=" border-4 border-white"
      />
    </Reveal>
  );
};

export default Example;
Prev: Next: