DEV Community: Dorian Morones

React Custom Tooltip

Dorian Morones — Sun, 14 Mar 2021 16:52:53 +0000

En ocasiones necesitamos dar información al usuario de la acción que ejecutara algún elemento del nuestro sitio web, una de las mejores formas de hacerlo es con un Tooltip.

Primero debemos escribir el markup de nuestro nuevo tooltip:

Necesitaremos 4 elementos como props:

content = sera el contenido a mostrar dentro del tooltip.
direction = definirá la posición del contenido.
delay = definirá el tiempo antes de mostrar el contenido.
children = sera el elemento que accionara el tooltip.

import React, { FunctionComponent, useState } from 'react';

//Styled Components
import {
    TooltipContainer,
    TooltipContent
} from './styles/Tooltip_Styles';

const Tooltip: FunctionComponent<TooltipProps> = ({ 
content, 
direction = 'bottom', 
delay = 300,  
children 
}) => {

  let timeout;
  const [show, setShow] = useState<boolean>(true);

  const showTip = () => {
    timeout = setTimeout(() => {
      setShow(true);
    }, delay);
  };

  const hideTip = () => {
    clearInterval(timeout);
    setShow(true);
  };

  return (
   <TooltipContainer
   onMouseEnter={showTip}
   onMouseLeave={hideTip}
   >
    {children}
    { show && (
     <TooltipContent direction={direction}>
      {content}
     </TooltipContent>
     )
    }
   </TooltipContainer>
  )
}

export default Tooltip;

Dentro de nuestro tooltip tenemos dos funciones:

showTip: esta función se activara cuando el cursor este sobre el contenedor del tooltip y encargara de mostrar el contenido del tooltip que recibimos en los props, cambiando el estado show a true.

const showTip = () => {
    timeout = setTimeout(() => {
      setShow(true);
    }, delay);
  };

hideTip: esta función se activara cuando el cursor salga del contenedor del tooltip y encargara de ocultar el contenido del tooltip, cambiando el estado show a false.

const hideTip = () => {
    clearInterval(timeout);
    setShow(true);
  };

En este punto ya tenemos la lógica para mostrar y ocultar el contenido del Tooltip, pero aún tenemos que definir la posición del contenido, y eso lo haremos con styled-components.

Pueden agregar los styled-components en el mismo archivo, pero sugiero sea en uno nuevo para tener más ordene en nuestro código.

En este nuevo archivo definiremos dos componentes:

TooltipContainer: sera el contenedor de todo el tooltip.
TooltipContent: sera el contenedor de la información que mostrara nuestro tooltip y la posición en la que esta información sé mostrar: top, bottom, left, right.

import styled, { css } from 'styled-components';

export const TooltipContainer = styled.div`
  display: inline-block;
  position: relative;
`

export const TooltipContent = styled.div`
  position: absolute;
  border-radius: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px;
  color: #fff;
  background: #000;
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1;
  z-index: 100;
  white-space: nowrap;
  &:before{
    content: '';
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 6px;
    margin-left: calc(6px * -1);
  }
  ${props => {
    if(props.direction === 'top'){
      return css`
        top: calc(20px * -1);
        &:before {
          top: 100%;
          border-top-color: #000;
        }
      `
    }
    if(props.direction === 'bottom'){
      return css`
        bottom: calc(20px * -1);
        &:before {
          bottom: 100%;
          border-bottom-color: #000;
        }
      `
    }
    if(props.direction === 'left'){
      return css`
        left: auto;
        right: calc(100% + 20px);
        top: 50%;
        transform: translateX(0) translateY(-50%);
        &:before {
          left: auto;
          right: calc(6px * -2);
          top: 50%;
          transform: translateX(0) translateY(-50%);
          border-left-color: #000;
        }
      `
    }
    if(props.direction === 'right'){
      return css`
        left: calc(100% + 20px);
        top: 50%;
        transform: translateX(0) translateY(-50%);
        &:before {
          left: calc(6px * -1);
          top: 50%;
          transform: translateX(0) translateY(-50%);
          border-right-color: #000;
        }
      `
    }
  }}
`

5 extensiones de VS Code para frontend

Dorian Morones — Thu, 07 Jan 2021 20:02:18 +0000

Durante los últimos 3 años, estuve probando extensiones de VS code para poder facilitar el día a día, y estas son mi top 5 para desarrollo frontend:

Turbo Console Log

Esta extensión te permite generar solo con un shortcut "ctrl + alt + L" un console.log con información importante para ser identificados rápidamente en el explorador.

Ejemplo:

console.log("🚀 ~ file: example.tsx ~ line 97 ~ handleExample ~ valueExample", valueExample)

La estructura es bastante simple, primero el archivo donde está el console.log, la linea del archivo, la función en donde está el archivo y la variable que se asigna al console.log.

Descargar

Auto Close Tag

Muchas veces cuando inicias en el desarrollo de frontend (y aun después de varios años) puedes cometer el error de omitir la etiqueta de cierre de un div o algún párrafo, o escribir mal el nombre de la etiqueta de cierre, estos errores al ser tan pequeños son difíciles de encontrar entre tantas lineas de código, Auto Close tag es la solución.

Ejemplo:

// Sin Auto Close Tag
<div>
  <p>Auto Close Tag</o>
</dib>

// Con Auto Close Tag
<div>
  <p>Auto Close Tag</p>
</div>

Descargar

Auto Rename Tag

Algunas veces necesitamos cambiar etiquetas, por alguna otra, como párrafos por span, o por un, Auto Rename Tag nos ayuda a hacer esto bastante rápido y con muy poco margen de error.

Ejemplo:

// Sin Auto Rename Tag
<div>
  <p>Auto Close Tag</p>
</dib>

// Con Auto Rename Tag
<div>
  <h2>Auto Close Tag</h2>
</div>

Descargar

Import Cost

Cuando trabajas con algún framework de Javascript, siempre es bueno saber cuando pesa alguna dependencia que estas usando para saber si es la mejor opción, Import Cost te muestra el peso de cada import que tienes en tus archivos.

Descargar

GitLens — Git supercharged

La ultima y muy útil al trabajar en un equipo de desarrollo es GitLens, te da información sobre la línea de código en que estes situado, como quien la modifico, cuando, el commit en el que se modifico, y link directo a ese commit.

Descargar

CSS Background color en Textos

Dorian Morones — Wed, 06 Jan 2021 20:22:45 +0000

Los degradados de color en un sitio web son detalles muy llamativos que dan peso a cierta sección, pero no solo podemos utilizarlos como fondo de un contenedor o banner, también podemos agregar un degradado de color a títulos.

Primero tenemos que definir el texto al que aplicaremos el degradado:

<h1 class="gradient">Mi super titulo</h1>

Una ves tenemos listo nuestro titulo, solo tenemos que aplicar estilos generales:

h1{
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
    font-size: 70px;
    font-weight: bold;
    text-transform: uppercase;
}

Para agregar el degradado necesitamos una propiedad de css llamada 'linear-gradient', que se utiliza de la siguiente manera:

background-image: linear-gradient(direction, color-1, color-stop2, ...);

direction: es la dirección en la que el degradado trabajara.
color-1: en color principal o de inicio del degradado.
color-2: en color secundario o de cierre del degradado.

El código con linear-gradient aplicado se vería así:

.gradient {
  background: linear-gradient(to right, #30CFD0 30%, #520AAB 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Resultado:

Spinner facil y rapido

Dorian Morones — Tue, 05 Jan 2021 01:28:51 +0000

Un spinner es un componente muy importante para un sitio web, ya que nos ayudar a dar información al usuario sobre el estatus de nuestra página al realizar la primera carga, o después de una acción del usuario como cambiar de opción en el menú, abrir una galería de imágenes, o enviar un formulario.

Una forma muy fácil de hacer un spinner o loading es con puro css, de esta manera nos aseguramos que se visualizara y funcionara correctamente en cualquier navegador.

Primero necesitamos crear un contenedor HTML:

<div class="spinner"></div>

Ahora solo necesitamos aplicar los estilos sobre este contenedor, y al ser solo CSS, puedes elegir la manera que más te guste de implementar como CSS, SCSS, styled-components, o cualquier otro:

Primero definiremos el tamano de nuestro spinner y agregaremos bordes para que sea un poco más estético:

.spinner {
  width: 36px;
  height: 36px;
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-left-color: #7d47ff;
}

Una ves tenemos la estructura base de nuestro spinner agregaremos las animaciones, de esta manera haremos saber al usuario que nuestro sitio web sigue funcionando:

.spinner {
  width: 36px;
  height: 36px;
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-left-color: #7d47ff;

  animation: spin 1s ease infinite;
}

Una ves agregada la animación spin solo nos queda agregar los pasos de esa animación con keyframes

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}