Cómo crear una galería de imágenes con desplazamiento infinito con React y CSS Grid

Introducción

En este tutorial, utilizaremos el framework de Javascript de React frontend y CSS Grid para crear una galería de imágenes con desplazamiento infinito, utilizando la API de Unsplash para incrustar las imágenes fotográficas. Utilizando un desafío de codificación de Codepen de Scotch.io como base para nuestro código, utilizaremos React.js para crear la interfaz, Axios para realizar las solicitudes HTTP y la react-infinite-scrollbiblioteca para implementar la función de desplazamiento infinito.

Además, para este tutorial, emplearemos React Hooks y usaremos componentes funcionales en todo el proyecto.

Prerrequisitos

Para este tutorial, utilice este código base de collage de imágenes como punto de partida para desarrollar su proyecto.

Paso 1: Instalación de los paquetes necesarios

Importa todas las dependencias necesarias desde una CDN. Codepen ofrece una barra de búsqueda en la que puedes escribir el nombre del módulo, seleccionar uno de los resultados y agregarlo a tu proyecto.

Las dependencias instaladas son:

• Reaccionar
• React-DOM
• Componente de desplazamiento infinito de React
• Axios

Vaya a Unsplash para crear una aplicación y obtener una clave de acceso.

Paso 2: Construcción del componente base

En React, la plantilla HTML del componente principal está escrita en JSX. Procederemos a escribir estos elementos HTML que conforman la plantilla en JSX.

Crea un componente funcional y renderízalo en el DOM con:

let Collage = () = {    // Return JSX  return (    div className="hero is-fullheight is-bold is-info"      div className="hero-body"        div className="container"          div className="header content"            h2 className="subtitle is-6"Code Challenge #16/h2            h1 className="title is-1"              Infinite Scroll Unsplash Code Challenge            /h1          /div    // Images go here        /div      /div    /div  );};// Render the component to the DOM element with ID of rootReactDOM.render(Collage /, document.getElementById("root"));

Aquí, creaste el componente principal Collage, devolviste los elementos HTML en JSX y los representaste en el elemento DOM con un ID de root. Se usaron clases de Bulma para brindar un estilo básico a la página.

Paso 3: creación de un componente de imagen única

A continuación, vamos a crear un único componente para una única imagen obtenida. Esto nos ayudará a establecer la posición de cada imagen.

Cree un único componente funcional con:

const UnsplashImage = ({ url, key }) = (  div className="image-item" key={key}     img src={url} /  /div);

Este componente recibe las propiedades de urly key, que son la URL de la imagen que se mostrará y la clave de cada imagen renderizada. En el componente, usamos el img/elemento para mostrar la imagen obtenida.

Paso 4: obtención y renderización de imágenes aleatorias desde Unsplash

Unsplash ofrece una API gratuita para obtener imágenes aleatorias. Las imágenes se almacenarán en un contenedor de estado y se pasarán al DOM desde el estado. Dado que usaremos React Hooks, manejaremos los métodos de estado y ciclo de vida con useStatey useEffect, respectivamente.

En el Collagecomponente, cree dos variables de estado, una para contener las imágenes entrantes y la otra para almacenar un valor booleano que le indique al programa si las imágenes están cargadas o no.

[...]const [images, setImages] = React.useState([]);const [loaded, setIsLoaded] = React.useState(false);[...]

A continuación, crearemos una función que obtenga 10 imágenes aleatorias mediante Axios. Para ello, se realiza una solicitud GET al punto final de la API y se pasa la clave de acceso obtenida y la cantidad de imágenes que se desea obtener. Para ello, se utiliza lo siguiente:

const fetchImages = (count = 10) = {    const apiRoot = "https://api.unsplash.com";    const accessKey = "{input access key here}";    axios      .get(`${apiRoot}/photos/random?client_id=${accessKey}count=${count}`)      .then (res = {        setImages([...images, ...res.data]);        setIsLoaded(true);      });};

Axios es una biblioteca basada en promesas y, al resolver la solicitud, utilizamos el setImagesmétodo para completar las imágenes obtenidas, así como para difundir las imágenes obtenidas anteriormente. Además, establecemos el valor de loadeden true.

Ahora que tenemos las imágenes almacenadas en estado, llamemos a esta fetchImagesfunción una vez que el componente esté montado. En versiones anteriores de React, hacíamos esto con el componentDidMountmétodo de ciclo de vida. Sin embargo, React ahora proporciona el useEffectgancho para manejar todas las operaciones de ciclo de vida en un componente funcional.

En el Collagecomponente, llame fetchImagesal montaje con:

[...]React.useEffect(() = {    fetchImages();}, []);[...]

El useEffectgancho toma un segundo parámetro, que es una matriz. La función proporcionada en el gancho se ejecutará cada vez que se actualice o modifique la matriz.

Ahora tienes una página que obtiene diez imágenes aleatorias de Unsplash. Procedamos a mostrar las imágenes en un contenedor de desplazamiento infinito.

React-infinite-scroll-component ofrece la posibilidad de mostrar un indicador de carga o cualquier elemento como marcador de posición, llamar a una función para obtener más datos una vez que el cargador está a la vista o se acerca a la vista y muestra cualquier dato especificado. En el JSX devuelto de Collagey después de divcon una clase de header, renderice las imágenes en el componente de desplazamiento infinito con:

InfiniteScroll     dataLength={images}     next={() = fetchImages(5)}     hasMore={true}     loader={      img         src="https://res.cloudinary.com/chuloo/image/upload/v1550093026/scotch-logo-gif_jq4tgr.gif"         alt="loading"      /}      div className="image-grid" style={{ marginTop: "30px" }}        {loaded ?             images.map((image, index) = (                UnsplashImage url={image.urls.regular} key={index} /            )): ""}    /div/InfiniteScroll

En el InfiniteScrollcomponente, pasamos una función al nextparámetro. La función llama a la fetchImagesfunción y pasa un parámetro de 5, que es la cantidad de imágenes que se obtendrán. En el loaderparámetro, pasamos una imagen en JSX para que sirva como marcador de posición de carga.

.map()se utiliza para iterar a través de la imagesmatriz en estado y renderiza cada imagen usando el UnsplashImagecomponente.

Paso 5: Dar estilo a la galería

Usaremos una cuadrícula CSS para aplicar estilo a las imágenes obtenidas. Edite el CSS de esta manera:

.title {  font-family: 'Carter One';}.container {  margin-top: 50px;  text-align: center;}.image-grid {  display: grid;  grid-gap: 10px;  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  grid-auto-rows: minmax(50px, auto);  .image-item:nth-child(5n){    grid-column-end: span 2;  }  img{    display: flex;    width: 100%;    height: 100%;    object-fit: cover;  }}

Esto crea una cuadrícula con columnas con un ancho de 250 px y llena todo el contenedor de imágenes. Además, las filas están configuradas para tener un mínimo de 50 px y un máximo de 100 autopx para que quepan todas las imágenes. Usamos la grid-column-endpropiedad en cada quinta imagen para que ocupe dos espacios de imagen en lugar de uno.

La object-fitpropiedad garantiza que cada imagen se ajuste o contenga el tamaño completo de su contenedor.

Puedes encontrar la galería completa aquí https://codepen.io/Chuloo/full/BMPXqy.

Conclusión

En este tutorial, creamos una galería de imágenes usando ganchos de React y una cuadrícula CSS. Puedes intentar jugar con la cuadrícula para crear una configuración aún mejor.