Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Add a placeholder prop to the Avatar component

オープン
#8,464 コメント 4 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

@SimonGebru がすでに取り組んでいます。

2026年10月12日 から。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
68/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
react, typescript
領域
frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
3.9k
フォーク
697
平均マージ
3日 12時間
マージ済み PR(30日)
46

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

primer/react のほかの issue

primer/react の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。