Responder al evento de cambio de tamaño de ventana en React

En este artículo, le enseñaremos cómo configurar un componente React para cambiar el contenido del sitio web cuando cambia la dimensión de la ventana.

Cambiar el tamaño de la ventana en React

A veces, los desarrolladores de React también necesitan responder cada vez que el usuario cambia el tamaño de la ventana. La respuesta puede ser diferente, como ajustar el tamaño del elemento, el tamaño de la fuente, cambiar el contenido del sitio web o el aspecto de su apariencia.

En algunos casos, puede ser necesario volver a renderizar los componentes en respuesta al cambio de tamaño de la ventana.

Volver a renderizar los componentes funcionales en el cambio de tamaño de la ventana

Desde que React actualizó la versión 16.8, los componentes funcionales pueden usar ganchos. Podemos crear un gancho personalizado que se llamará cada vez que detecte el evento redimensionar.

El gancho personalizado se parecería a lo siguiente.

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

function useWindowSize() {
  const [windowSize, setWindowSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateWindowSize() {
      setWindowSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateWindowSize);
    updateWindowSize();
    return () => window.removeEventListener('resize', updateWindowSize);
  }, []);
  return windowSize;
}

Puede usar este enlace personalizado para almacenar las dimensiones de la ventana como valores de estado. Por lo tanto, los valores de estado se actualizarán cada vez que cambie el tamaño de la ventana, lo que activará la nueva representación.

Veamos una forma posible de usar el gancho useWindowSize.

Ejemplo de código:

import "./styles.css";
import React, { useLayoutEffect, useState } from "react";

export default function App() {
  const dimensions = useWindowSize();
  console.log("re-rendered");
  return (
    <div className="App">
      <h1>{"width: " + dimensions[0] + " height:" + dimensions[1]}</h1>
    </div>
  );
}

function useWindowSize() {
  const [windowSize, setWindowSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateWindowSize() {
      setWindowSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener("resize", updateWindowSize);
    updateWindowSize();
    return () => window.removeEventListener("resize", updateWindowSize);
  }, []);
  return windowSize;
}

Aquí, tenemos una aplicación web simple con el enlace useWindowSize(), definido justo después. Este gancho devuelve una matriz con dos elementos, el primero es el ancho y el segundo es la altura.

Por lo tanto, cuando llamamos a este gancho en el componente Aplicación, mostramos estos valores en consecuencia.

Producción:

Demo en vivo

Volver a renderizar los componentes de la clase en el cambio de tamaño de la ventana

Puede usar el mismo principio en los componentes de clase: almacene la altura y el ancho de la ventana en una variable de estado. Sin embargo, en este caso, necesitamos dividir parte del código del enlace useEffect() entre los enlaces de ciclo de vida componentDidMount() y componentDidUpdate().

Cuando el componente está montado, agregamos un detector de eventos y le indicamos que llame al controlador de eventos que definimos en el constructor. También configuramos el gancho del ciclo de vida componentDidUpdate() para llamar a handleResize() cada vez que el componente se actualiza o se vuelve a renderizar.

class App extends Component {
  constructor(props) {
      super(props);
      this.state = {
          dimensions: []
      }
      this.handleResize = this.setState({dimensions: [window.innerWidth, window.innerHeight]})
  }

  componentDidMount() {
    window.addEventListener("resize", handleResize());
  }
  componentDidUpdate() {
    handleResize()
  }
  render() {
    return (
      <div>{"width: "+ {this.state.dimensions.width} + " " + "height: " + {this.state.dimensions.height}}</div>
    );
  }
}

A diferencia de los componentes funcionales, aquí usamos el método setState() para actualizar el estado, que toma un argumento: el nuevo objeto de estado. Los ganchos no son compatibles con los componentes de React Class.

En JSX, hacemos referencia a las variables de estado a través de la palabra clave this, que se refiere a la instancia de una clase. De lo contrario, todo funciona de manera similar a los componentes funcionales.