¿Cómo crear un avatar con iniciales estilo Google con javascript y react?


Hola amigos ¿cómo están? Debido a la carga de trabajo que tuve últimamente no me había sido posible escribir en mi blog. Pero este año espero poder escribir varios artículos que sean útiles para ti y tu desarrollo como programador.

Para empezar con el tema, he creado un repositorio donde vamos a añadir componentes esenciales para crear una WebApp.

https://github.com/herel/react-components

Para este tutorial, es necesario que cuentes con conocimientos previos básicos en React, así como conocer qué es la función render, constructor y componente WillMount, entre otros. Aquí te dejo el enlace de la documentación de React en español: https://es.reactjs.org/

Como primer componente vamos a crear un avatar estilo Google, este funciona de la siguiente forma:

  • El componente debe recibir los siguientes props:
    • Name: String con el nombre completo del usuario
    • Source: String con el URL del avatar, por default False
    • Size: Tamaño del avatar que vamos a manejar. Estos son: big (grande), médium (mediano) y small (chico).
  • Si el usuario no tiene foto, debe mostrar las iniciales del nombre y apellido
  • En caso de que el usuario cuente con foto de perfil, se deberá mostrar esta foto de perfil con un tooltip mostrando el nombre completo
  • Como consejo, para que la carga sea más rápida se debe recortar la imagen al tamaño del contenedor

A continuación, vamos a crear nuestro componente Avatar.js dentro de la carpeta Components.

import React, { Component } from 'react';
import classNames from 'classnames';
class Avatar extends Component{

    render(){
        let { size }  = this.props;
        let container = classNames('avatar',size);
        return (
            <div className={container}>

            </div>
        );
    }
}

export default Avatar;

Cómo se puede observar en el primer fragmento de código, en el método render hemos creado 1 div que recibe la variable Container, y por default su clase es avatar. De los props extraemos el valor Size, que en caso de tener algún valor lo añadirá automáticamente en la clase del div.

Ahora, añadiremos estilos para los tres tamaños diferentes de nuestro componente:

.avatar{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: var(--mainBrandColor);
}

.avatar.small{
    width: 40px;
    height: 40px;
}

.avatar.medium{
    width: 60px;
    height: 60px;
}

.avatar.big{
    width: 80px;
    height: 80px;
}

.avatar span{
    font-family: var(--font-primary);
    font-size: 16px;
    color: white;
    font-weight: 400;
}

.avatar.medium span{
    font-size: 22px;
}
.avatar.big span{
    font-size: 30px;
}

El resultado sería el siguiente:

Posteriormente, vamos a añadir sólo funciones de JavaScript. Esto para extraer las iniciales del usuario y mostrar únicamente las primeras letras. Para este propósito vamos a crear la función getName, como se muestra en el siguiente código:

import React, { Component } from 'react';
import classNames from 'classnames';
import './avatar.css';

class Avatar extends Component{


    _getName(){
        let { name } = this.props;
        return name
                .split(' ')
                .map( item => item.charAt(0) )
                .slice(0,2)
                .join('');
    }

    render(){
        let { size = 'small' }  = this.props;
        let container = classNames('avatar',size);
        return (
            <div className={container}>
                <span>{this._getName()}</span>
            </div>
        );
    }
}

export default Avatar;

Como seguramente notaste, lo que hicimos en la función getName fue obtener de los props la variable name. Después, usamos la función Split para crear un arreglo de las palabras que contiene el nombre. En este caso pueden ser nombre y apellidos. Una vez que tenemos el arreglo, lo recorremos con la función Map, donde en cada interacción obtendremos el primer carácter con la función charAt(0) en la posición 0.

Es posible que el usuario tenga más de un nombre y dos apellidos, usamos la función Slice para que sólo tome dos elementos de arreglo que regresa map. Por último, unimos el arreglo con la función Join.

Esto fue lo que pasó:

> Juan Perez Sanchez
Al usar la funcion split nos regreso el siguiente arreglo
> ["Juan","Perez","Sanchez"]
Al usar la funcion map y usar la funcion charAt nos regresa el siguiente arrelo
> ["J","P","S"]
Como solo debemos usar los primeras 2 letras usamos la funcion slice(0,2) que regresa el siguiente arreglo
> ["J","P"]
Por ultimo se uso la funcion join donde une los elementos con un string el resultado es el siguiente
> "JP"

Este el resultado de nuestro componente. Ahora podemos reutilizarlo en cualquier parte de nuestro proyecto, sin tener que escribir más códigos CSS o HTML.

Puedes ver el ejemplo en el siguiente enlace: https://herelodin.com/avatar-example/

Gracias por leer y compartir este tutorial. Si deseas puedes hacer un donativo aquí para mantener este sitio web y subir más contenido.