Obtener ancho de ventana en React

Este artículo demostrará cómo encontrar el valor del ancho de la ventana en React.

La capacidad de respuesta es una de las bases del desarrollo web moderno. En estos días, las personas navegan por sitios web desde muchos dispositivos diferentes: computadoras portátiles, computadoras de escritorio, teléfonos móviles e incluso consolas de juegos.

Capacidad de respuesta significa responder a las necesidades del usuario y ajustar el diseño de su aplicación según el dispositivo del usuario.

Obtener ancho de ventana en React

La característica más importante de cualquier dispositivo es el tamaño de su pantalla. En la aplicación React, podemos acceder fácilmente al número que representa el tamaño de la pantalla en píxeles.

Luego, podemos usar esta información para cambiar la apariencia y la funcionalidad de nuestra aplicación React. Puede usar el tamaño de la pantalla (en píxeles) para aplicar clases de forma condicional.

Por ejemplo, si el ancho de la ventana es inferior a 600 px, tenga un relleno de 10 px, y si es superior a 600 px, tenga un relleno de 20 px. En resumen, puede usar el ancho de la pantalla para verificar qué tan bien encaja el contenido en su página.

Podemos almacenar el valor del ancho de la ventana en el estado del componente. Si el ancho de la ventana cambia durante el tiempo de ejecución, puede configurar su aplicación React para establecer el valor de estado en el ancho actualizado.

Obtenga el ancho de la ventana en los componentes de la clase React

En los componentes de clase, necesitamos usar el método .addEventListener() para escuchar el evento cambiar tamaño en el objeto ventana en sí. Cada vez que el usuario cambia el ancho de la ventana, se ejecuta el controlador de eventos, actualizando el valor del ancho de la ventana.

Código:

constructor(props) {
    super(props);
    this.state = { windowWidth: 0, windowHeight: 0 };
    this.handleResize = this.handleResize.bind(this);
}

componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
}

handleResize() {
    this.setState({ windowWidth: window.innerWidth, windowHeight: window.innerHeight });
}

Primero, comenzamos iniciando el estado y configurando las propiedades windowWidth y windowHeight en un valor predeterminado de 0. También vinculamos el método handleResize.

En el método de ciclo de vida componentDidMount(), llamamos al método handleResize() por primera vez. Esto establecerá las dimensiones iniciales de nuestra página y un controlador para el evento redimensionar.

En el método de ciclo de vida componentWillUnmount, eliminamos el detector de eventos.

Finalmente, usamos la propiedad innerWidth del objeto ventana para acceder al ancho de una ventana. Usamos la propiedad innerHeight para capturar la altura.

Usamos el método setState() para actualizar el estado del componente de la clase y establecer las propiedades de estado en estas dimensiones.

Obtenga el ancho de la ventana en los componentes de la función React

En los componentes de función, puede crear un gancho personalizado useWindowDimensions y luego usarlo para obtener fácilmente los valores de ancho y alto de la ventana.

Veamos la definición del gancho useWindowDimensions.

Código:

import { useState, useEffect } from 'react';

function getWindowDimensions() {
    const width = window.innerWidth
    const height = window.innerHeight
    return {
        width,
        height
    };
}

export default function useWindowDimensions() {
    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
    useEffect(() => {
        function handleResize() {
            setWindowDimensions(getWindowDimensions());
        }
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return windowDimensions;
}

Luego, usamos el enlace useEffect importado de la biblioteca principal de React para realizar las mismas tareas que hicimos en los componentes del ciclo de vida: agregue un detector de eventos y ejecútelo una vez para obtener las dimensiones iniciales de la ventana cuando se monte el componente, y elimine el detector de eventos cuando se desmonta.

Una vez configurado, puede importar el gancho useWindowDimensions dentro de otros componentes y usarlo para obtener fácilmente el ancho y el alto de una ventana.

Código:

const App = () => {
    const { height, width } = useWindowDimensions();
    return (
        <div>
            The width of your window: {width}
            The height of your window: {height}
        </div>
    );
}