Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Add a placeholder prop to the Avatar component

Abierto
  • ¿Algo no está bien?
#8,464 4 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

@SimonGebru ya está trabajando en esto.

Desde el 12/10/2026.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
68/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
3.9k
Forks
697
Merge medio
3 d 12 h
PR fusionados (30 d)
46

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de primer/react

Todos los issues de primer/react

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.