Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Add a placeholder prop to the Avatar component

Đang mở
  • Có gì không ổn?
#8,464 4 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

@SimonGebru đang làm issue này rồi.

Từ ngày 12/10/2026.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
68/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Start by locating the Avatar component and its existing tests, then read how src, size, and square shape are currently handled. Add coverage for text placeholders at different sizes, confirm images take precedence when src is present, and verify the placeholder is centered and follows the existing shape.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Feature request

Add an optional placeholder prop to Avatar so it can display text, such as an initial or short label, when no image URL is provided.

For example:

Avatar placeholders displaying S, M, L, XL, and XXL at different sizes

<Avatar placeholder="S" size={24} />
<Avatar placeholder="M" size={32} />
<Avatar placeholder="L" size={40} />
<Avatar placeholder="XL" size={56} />
<Avatar placeholder="XXL" size={72} />

The placeholder should be centered inside the avatar and scale appropriately with size. It should follow the existing circular or square shape. When src is provided, the image should take precedence.

Motivation

The current Avatar renders an <img> and requires src, so there is no built-in way to show a text avatar for a user who has no profile image. A placeholder prop would let applications use the same component and sizing API for both image and text avatars, as shown in the attached example.

Ngôn ngữ chính
TypeScript
Star
3.9k
Fork
697
Merge trung bình
3 ngày 21 giờ
Pull request đã merge (30 ngày)
51

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

  • Không có Dockerfile hay tệp Docker Compose
  • Có mẫu pull request
  • Không có hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của primer/react

Tất cả issue của primer/react

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.