Establecer consultas de medios en React sin CSS

1. Consultas de medios en React
2. Cree componentes de clase para establecer consultas de medios en React sin CSS
3. Cree componentes funcionales para establecer consultas de medios en React sin CSS

En 2022, los usuarios que navegan por Internet son mucho menos predecibles que hace 20 o incluso 10 años. Ahora, la mayoría de las personas navegan por Internet en sus teléfonos inteligentes y esperan una experiencia de usuario mucho mejor que antes.

Los clientes también están inundados de opciones, por lo que las empresas tienen que esforzarse más para diseñar los mejores sitios web posibles para llamar su atención.

Consultas de medios en React

Dado que los usuarios visitan sitios web desde dispositivos con diferentes tamaños de pantalla, los desarrolladores web deben encontrar una manera de ajustar el diseño del sitio web en consecuencia. El uso de consultas de medios es la forma principal de garantizar la capacidad de respuesta de su aplicación.

React es la biblioteca basada en JavaScript más popular para crear aplicaciones rápidas de una sola página. Si ha trabajado con DOM y ha creado aplicaciones con HTML, CSS y JavaScript, no debería tener dificultades para pasar a trabajar en React.

React usa JSX, un lenguaje de plantillas similar a HTML. En muchos sentidos, funciona como HTML, pero existen diferencias significativas; por ejemplo, establecer estilos en línea funciona de manera diferente en JSX.

Como sabrá, las consultas de medios son relativamente fáciles de implementar en CSS. Sin embargo, por alguna razón, si desea implementar consultas de medios sin CSS, puede lograrlo usando JavaScript simple en React.

Cree componentes de clase para establecer consultas de medios en React sin CSS

Los componentes de clase fueron la forma principal de tener una funcionalidad de estado en React durante mucho tiempo. El estado debe hacer que su componente React responda a las acciones del usuario.

Veamos cómo podemos configurar las consultas de medios en los componentes de la clase React sin más preámbulos.

Ejemplo:

import React, { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            screenSizeFits: window.matchMedia("(min-width: 768px)").matches
        };
    }

    componentDidMount() {
        const adjustScreenSize = (e) =>
            this.setState({ screenSizeFits: e.matches });
        window
            .matchMedia("(min-width: 768px)")
            .addEventListener("change", adjustScreenSize);
    }
    render() {
        return (
            <div>
                {this.state.screenSizeFits && <h1>Laptop</h1>}
                {!this.state.screenSizeFits && <h3>Smartphone or Tablet</h3>}
            </div>
        );
    }
}

export default App;

Tenemos un componente de Aplicación con una propiedad de estado llamada screenSizeFits. Se inicializa a un valor booleano, que obtenemos usando el método window.matchMedia().

Usamos el método de ciclo de vida componentDidMount() para agregar un detector de eventos y actualizar el estado. Agregamos un detector de eventos al objeto ventana para que cada vez que cambie la resolución de la pantalla, actualicemos la variable estado en consecuencia.

Si la resolución de la pantalla es superior a 768 píxeles, la propiedad screenSizeFits se establecerá en true. Si es menor, la propiedad se establecerá en false.

Finalmente, usamos el conector lógico simple && para mostrar el texto relevante basado en el valor de la propiedad estado.

Puede consultar esta demostración en vivo para ver cómo funciona. Intente aumentar o reducir el tamaño de la pantalla y observe cómo cambia el texto en consecuencia.

Cada vez que cambie la resolución de la pantalla, el componente contratará un detector de eventos y actualizará el estado en consecuencia.

Cree componentes funcionales para establecer consultas de medios en React sin CSS

Desde React v16.8, puede usar ganchos para agregar funciones interactivas a componentes funcionales. La comunidad de React creó la biblioteca react-media-hook para ayudar a los desarrolladores a administrar fácilmente las consultas de medios en componentes funcionales.

Puede instalar el paquete ingresando este comando:

npm i react-media-hook --save

Luego, puede importar el gancho useMediaPredicate directamente en su aplicación y comenzar a diseñar condicionalmente su aplicación según el tamaño de pantalla del dispositivo del usuario.

Ejemplo:

import React from "react";
import { useMediaPredicate } from "react-media-hook";

const App = () => {
    const moreThan720 = useMediaPredicate("(min-width: 720px)");

    return <div style={{border: moreThan720 ? "2px solid red" : ""}}>
        <button>SomeButton</button>
    </div>
};

En este ejemplo, la variable moreThan720 almacenará un valor booleano, dependiendo de si el argumento que le pasamos al hook useMediaPredicate es true o no.

Luego, usamos el operador ternario para establecer estilos en línea de forma condicional. Si el ancho de la ventana supera los 720 px, estableceremos una propiedad de borde con el siguiente valor: 2 px rojo sólido; si no, no habrá frontera.