useWidth, useHeight ? Custom hook para obtener tamaño de la pantalla.

Israel Moreno 💀 — Mon, 08 Nov 2021 17:31:21 +0000

Introducción

En este post te explicare como crear un custom hook que te permita obtener los valores del ancho y alto de la pantalla.
Un ejemplo de muchos para usar este custom hook, puede ser para ocultar un elemento si la pantalla tiene poco espacio.

Sin mas preambulo, vamos a darle !

Empecemos 👨🏻‍💻 ☕️

Lo primero que necesitamos es crear nuestro custom hook, yo lo hare en una carpeta llamada hooks y dentro de ella creare el archivo useScreenSize.js

 src /
 |  hooks /
 |  |  useScreenSize.js
 app.js
 index.js
 styles.css

Vamos a importar los hooks de react: useState & useEffect,
a crear nuestra function que exportaremos y agregaremos dos estados para el alto y el ancho

import { useState, useEffect } from "react";

const useScreenSize = () => {
  const [width, setWidth] = useState();
  const [height, setHeight] = useState();

  return { height, width }
}

export default useScreenSize;

Yo he decidido retornar los valores en un objeto, sin embargo puedes hacerlo en un array o de la manera que gustes, pero para mí es mas limpio y claro en un objeto.

Los estados width y height nos darán su tamaño respectivo de pixeles en forma de numero (number). Para obtener estos valores necesitamos llamar al objeto window del DOM. Así que agregaremos este valor inicial en nuestros estados de inicio para el alto y ancho cada vez que usemos nuestro customHook

  const [width, setWidth] = useState(window.innerWidth);
  const [height, setHeight] = useState(window.innerHeight);

Ahora necesitamos decirle a nuestro customHook que actualice los valores cada vez que el usuario cambie el tamaño de la ventana, así que necesitamos una función que nos diga que se actualicen estos valores.

  const handleResize = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  };

Esta función por sí sola no obtendrá los valores cada vez que se cambie el tamaño de la ventana, necesitamos del hook useEffect para cambiar el estado (valores) del ancho y alto.
Agreguemos el hook useEffect con lo siguiente:

  useEffect(() => {
    window.addEventListener("resize", handleResize);
  }, []);

Lo que se esta haciendo aquí, es que estamos agregando un listener que va a escuchar cada vez que se cambie el tamaño de la ventana, y como puedes ver le estamos agregando en el segundo parámetro la función que debe hacer, que para nuestro caso es simplemente actualizar el valor del alto y ancho.

Hasta este punto nuestro custom hook ya funciona y podemos obtener los valores del ancho y alto cada vez que se cambie el tamaño de la ventana y el código va así:

import { useState, useEffect } from "react";

const useScreenSize = () => {
  const [width, setWidth] = useState();
  const [height, setHeight] = useState();

  useEffect(() => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);

    window.addEventListener("resize", handleResize);
  }, []);

  return { height, width }
}

export default useScreenSize;

Si dejamos el hook de esta manera, podemos provocar que crahsee nuestra app y no solo nuestra app, si no hacer lenta la computadora.

Si te preguntas por qué ? Y no sabes un, dejame explicarte:

Nuestro hook funciona de manera correcta, sin embargo, el listener seguirá actualizando los valores en todas las vistas/paginas de la aplicación en todo momento, lo que ocasiona que se consuma mucha memoria de la computadora. Para ello necesitamos quitar el listener una vez que dejemos de usar el hook y no tenerlo siempre activo. Así que lo único que tenemos que hacer es pararlo en nuestro useEffect:

  useEffect(() => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

Con esto evitamos que creashee nuestra maquina y evitamos el consumo de memoria. Cada vez que dejemos de usar nuestro hook en un componente/pagina o donde lo implementemos, eliminamos el listener y la función que tiene que dejar de hacer.

Este seria nuestro código final:

import { useState, useEffect } from "react";

const useScreenSize = () => {
  const [width, setWidth] = useState(window.innerWidth);
  const [height, setHeight] = useState(window.innerHeight);

  useEffect(() => {
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  const handleResize = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  };

  return { width, height };
};

export default useScreenSize;

Puedes ver mas a detalle este customHook en mi code sandbox:
https://codesandbox.io/s/usescreensize-ht3xw

Espero haber podido ayudarte y aportar algo de aprendizaje hoy a tu día.

Adios ../../../.. relative imports JS

Israel Moreno 💀 — Thu, 19 Aug 2021 16:15:41 +0000

Cada vez que creamos componentes, funciones, constantes o cualquier otra cosa en nuestro proyecto en React o cualquier otro framework, solemos hacerlo en la carpeta src , y cuando importamos estos archivos solemos hacerlo con las rutas relativas.

Suponiendo que tenemos nuestro proyecto de la siguiente manera:

 - src /
   - components /
      - Avatar /
         index.js
      - RoundedButton /
         index.js

Al importar nuestros componentes y/o funciones o cualquier archivo dentro de nuestra carpeta src, solemos hacerlos de la siguiente manera:

import RoundedButton from '../../components/RoundedButton'
import Avatar from '../../components/Avatar'

Hacerlo de esta manera no implica una mala practica o que estes haciendo mal, el detalle es que entre mas crecen nuestros imports se ve mas sucio nuestro codigo en la parte superior. Que tal se verian nuestros imports de esta manera ? :

import RoundedButton from 'components/RoundedButton' 
import Avatar from 'components/Avatar'

Se veria mas limpio no ?

Hacer estas importaciones es demasiado sencillo. En tu proyecto crea o edita el archivo jsconfig.json si usas Javascript o tsconfig.json si usas Typescript, y agrega las siguientes lineas:

{
   "compileOptions": {
      "baseUrl": "src"
   },
   "include": ["src"]
}

You are Ready ! Ahora puedes dejar de usar las rutas relativas y hacer las importaciones de tus archivos mas facil

import React from 'react'

import Avatar from 'components/Avatar'
import RoundedButton from 'components/RoundedButton'

const Panel = () => {
  return (
    <>
       <RoundedButton />
       <Avatar />
    <>
  )
}

Asi de sencillo es olvidarnos de las rutas relativas...

Nota: Esto funciona perfectamente sin hacer mas modificaciones en VSCode, para WebStorm e IntelliJ existe una configuracion para que funcione. Espero pronto actualizar este articulo y compartir como seria la configuracion en los IDE's de JetBrains

Este tip lo aprendi de Nilanth... Puedes ver su articulo original en el siguiente enlace:
https://dev.to/nilanth/no-more-import-in-react-2mbo

DEV Community: Israel Moreno 💀

useWidth, useHeight ? Custom hook para obtener tamaño de la pantalla.

Introducción

Empecemos 👨🏻‍💻 ☕️

Adios ../../../.. relative imports JS