# All files / src/avatar Avatar.tsx

100% Statements 129/129
100% Branches 4/4
100% Functions 1/1
100% Lines 129/129

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    1301x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    1x
     import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from "react";
    import { type PropsWithRef } from "../types.js";
    import { avatar, avatarImage, type AvatarClassNameOptions } from "./styles.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-avatar-background-color"?: string;
        "--rmd-avatar-color"?: string;
        "--rmd-avatar-border-color"?: string;
        "--rmd-avatar-border-radius"?: string | number;
        "--rmd-avatar-size"?: string | number;
        "--rmd-avatar-font-size"?: string | number;
      }
    }

    export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;

    export interface AvatarProps
      extends Omit<HTMLAttributes<HTMLSpanElement>, "color">,
        AvatarClassNameOptions {
      /**
       * This should be an image `src` attribute to create an avatar from. When this
       * prop is defined, you should not add any children to the avatar as the
       * positioning will break.
       */
      src?: string;

      /**
       * An optional alt tag to display on the `<img>` when the `src` prop is also
       * applied.
       *
       * For accessibility and screen readers, you normally do not want to actually
       * provide this prop. This should only be used if the `Avatar` is not
       * accompanied by some other component or main content as it will be extra
       * noise for screen readers.
       *
       * @defaultValue `""`
       */
      alt?: string;

      /**
       * An optional `referrerPolicy` to provide to the `<img>` element if the `src`
       * or `imgProps` props are provided.
       *
       * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}
       *
       * @remarks \@since 2.2.0
       */
      referrerPolicy?: AvatarImgAttributes["referrerPolicy"];

      /**
       * An optional object of image props and ref that can be used to create an
       * image within the `Avatar`. This can be useful to add a custom `style`
       * or`className` to the `<img>` element if that additional customization is
       * needed.
       *
       * Note: The values in this object will override the `src`, `alt`, and
       * `referrerPolicy` root level avatar props if they exist on this object.
       *
       * @remarks \@since 2.2.0
       */
      imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;
    }

    /**
     * **Server Component**
     *
     * An `Avatar` is generally used to represent objects or people within your app.
     * The avatar can consist of an image, an icon, or some text to display. When
     * the avatar is not an image, different themes can be applied to make the
     * avatar more unique.
     *
     * @example
     * Simple Example
     * ```tsx
     * import { Avatar } from "@react-md/core";
     * import { type ReactElement } from "react";
     *
     * export function Example(): ReactElement {
     *   return <Avatar src="/path-to-img.png" />;
     * }
     * ```
     */
    export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
      function Avatar(props, ref) {
        const {
          className,
          children,
          src,
          alt = "",
          size = "avatar",
          color = "",
          theme,
          imgProps,
          referrerPolicy,
          ...remaining
        } = props;

        let img;
        if (src || imgProps) {
          img = (
            <img
              src={src}
              alt={alt}
              referrerPolicy={referrerPolicy}
              {...imgProps}
              className={avatarImage({ className: imgProps?.className })}
            />
          );
        }

        return (
          <span
            {...remaining}
            ref={ref}
            role="presentation"
            className={avatar({
              size,
              color,
              theme,
              className,
            })}
          >
            {img}
            {children}
          </span>
        );
      }
    );