Como crear un avatar con iniciales estilo Google


Hola amigos hace un tiempo que no escribia en mi blog debido a la carga de trabajo que tenia, pero este año espero poder escribir varios articulos. he creado este repositorio donde vamos añadir componentes esenciales para crear una WebApp.

En este tutorial asumo que tienes conocimientos basicos en react y conoces que es la funcion render, constructor y componentWillMount entre otros, aqui el enlace de la documentacion de react en español.

y como primer componente vamos a crear un avatar estilo google que funciona de la siguiente forma:

  • El componente debe recibir los siguiente props:
    • name: String con el nombre completo del usuario
    • source: String con la url del avatar por default False
    • size: Tamaño del avatar vamos a manejar 3, big, medium y small
  • Si el usuario no tiene foto debe mostrar las iniciales del nombre y apellido
  • Si el usuario tiene foto de perfil se debera mostrar la foto de perfil con un tooltip mostrando el nombre completo
  • y como plus la imagen se debe recortar al tamaño del contendor para que cargue mas rapido

Vamos a crear nuestro componente Avatar.js en 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;

Como pueden observar en el primer framento de codigo en el metodo render creamos 1 div que recibe la variable container con la clase por default avatar y de los props extraimos el valor size que en caso de que tenga algun valor lo va añadir en la clase del div

Vamos añadir estilos para los 3 diferentes tamaños 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 seria el siguiente

Ahora vamos añadir solo funciones de javascript para extrear las iniciales del usuario y mostrar solo las primeras letras para esto vamos a crear la funcion getName como se muestra en el siguiente codigo

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 pueden observar lo que se hizo en la funcion getName fue obtener de los props la variable name despues usamos la funcion split para crear un arreglo de las palabras que contiene el nombre en este caso puede ser nombre y apellidos, una vez que tenemos el arreglo lo recorremos con la funcion map donde en cada iteracion obtenemos el primer caracter con la funcion charAt(0) en la posicion 0, como puede que el usuario tenga mas de 1 nombre y dos apellidos usamos la funcion slice para que solo tome dos elementos del arreglo que regresa map y por ultimo unimos el arreglo con la funcion join

Esto fue lo que paso:

> 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 es el resultado de nuestro componente ahora podemos reutilizar en cualquier parte de nuestro proyecto sin tener que escribir mas codigo css o html

Puedes ver el ejemplo en el siguient enlace, no olvides compartir y comentar que te parecio y que otro componente te gustaria hacer.