Cómo renderizar diferentes componentes según el tamaño de la pantalla

Hola, me llamo Miguel y en esta ocasión les traigo un nuevo artículo.

Introducción

Recientemente me encontré con una API web JS bastante sudorosa que antes desconocía por completo.

Con él, puede comparar el tamaño de la ventana con una consulta de medios y obtendrá un booleano: true si el tamaño de la ventana coincide con su consulta o false no.

Puede realizar la verificación una vez que se establece un oyente para verificar dinámicamente si la ventana coincide con su consulta.

Casos de uso (no exhaustivo)

Quizás se pregunte por qué querríamos utilizar esta API.

Ya tenemos consultas de medios CSS para cambiar el estilo de nuestra página en función de su tamaño.

Pero en ciertos casos, necesita renderizar diferentes componentes basados ​​en ese tamaño, y CSS no puede ayudarlo allí.

A veces, también, la cantidad de cambio de estilo es tan grande entre las vistas, que desea en cada lado de un punto de interrupción que puede encontrar más simple tener dos componentes diferentes que son simplemente diferentes por sus estilos y luego renderizarlos dependiendo del tamaño de la ventana.

Veamos un ejemplo para entenderlo.

Ejemplo de JavaScript de vainilla

Quería la capacidad de renderizar diferentes componentes en función del tamaño de la pantalla en un proyecto Svelte.

Si no está familiarizado con Svelte, ese es un marco JS que reúne el HTML, CSS y JS para un componente en un solo archivo .svelte, que se compilará antes de enviarse al navegador.

Por lo tanto, CSS y JS en un archivo de este tipo tienen como alcance un bloque de HTML. El conjunto se conoce como un componente Svelte que puede pasar …

Entonces, el ejemplo que daré aquí es un ejemplo implementado en vanilla JS, pero si se pregunta cómo implementar esa función en una aplicación React, consulte react-media. Este paquete fue recomendado en un hilo de Reddit.

Leí el documento y parece bastante bueno. Además, fue realizado por el creador de reaccionar-enrutador, definitivamente échale un vistazo.

 Ahora, profundicemos en el ejemplo: 

Primero, crearé dos componentes de la barra de navegación para imitar la situación que tenemos en un marco basado en componentes:

La única diferencia entre esas dos barras de navegación es que la segunda es un enlace de navegación más.

Diremos que queremos renderizar la barra de navegación larga (Component2) en pantallas de escritorio, pero en dispositivos móviles,  decidimos eliminar un enlace de navegación debido al tamaño de la pantalla  (podríamos poner ese enlace de navegación en un menú de hamburguesas, por ejemplo).

Entonces, para la vista móvil, renderizaremos la barra de navegación corta (Component1).

Para renderizar un componente, usaremos un pequeño ayudante para inyectar el html en la barra de navegación:

Ahora, imagine que nuestro punto de interrupción es un ancho de 600px: más se considera vista de escritorio, menos o igual se considera vista móvil.

Estamos totalmente equipados para usar Window.matchMedia():

Aquí, especificamos nuestra consulta como una cadena en el window.matchMedia() función, que devuelve un objeto de tipo MediaQueryList.

En este objeto, puede acceder a las coincidencias de propiedades, que son booleanas y le indican si el tamaño de la ventana actual coincide con su consulta de medios.

Bastante simple.

Se parece a esto:

En este objeto, puede acceder a la propiedad matches que es un booleano que le indica si el tamaño de la ventana actual coincide con su consulta de medios.

Sin embargo, este ejemplo solo funcionaría para el primer renderizado.

Si queremos ajustar dinámicamente el diseño, podemos establecer un detector de eventos en la lista de consulta de medios devuelta, de tipo change:

Entonces, en el escritorio, se verá así:

Y en el móvil:

Espero que te haya sido de utilidad. Gracias por leer este post.