Implementar desplazamiento horizontal de tarjetas en React

1. Reaccionar tarjetas de desplazamiento horizontal
2. La lista de cartas en el pergamino

Es técnicamente posible construir cualquier cosa con solo Vanilla JavaScript. Los marcos como React agregan una estructura al lenguaje principal de JavaScript, lo que lo ayuda a crear fácilmente aplicaciones web.

React también tiene una gran comunidad de desarrolladores que crean componentes personalizados y los comparten con todos.

Los desarrolladores de la comunidad React han creado muchos paquetes que le permiten agregar casi todas las funciones que pueda necesitar en una aplicación React. Puede utilizar estos componentes personalizados sin saber cómo funcionan.

Este artículo discutirá la creación de un carrusel de tarjetas desplazables horizontalmente en React.

Reaccionar tarjetas de desplazamiento horizontal

Puede crear un componente React personalizado para tarjetas desplazables horizontalmente. Sin embargo, llevará demasiado tiempo y es posible que no funcione tan bien como los paquetes listos para usar.

En este artículo, usaremos el paquete llamado react-spring-3d-carousel.

Debemos importar el componente personalizado Carrusel del paquete react-spring-3d-carousel. Gracias a este componente, implementar tarjetas de desplazamiento horizontal es muy fácil.

Todo lo que tiene que hacer es proporcionar una lista de elementos DOM que se muestran en el carrusel.

Veamos un ejemplo.

import "./styles.css";
import React, { Component } from "react";
import Carousel from "react-spring-3d-carousel";
import SampleCard from "./card";
import { config } from "react-spring";
class ExampleCarousel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      changeSlide: ""
    };
  }
  slides = [
    {
      key: 1,
      content: <SampleCard />
    },
    {
      key: 2,
      content: <SampleCard />
    },
    {
      key: 3,
      content: <SampleCard />
    },
    {
      key: 4,
      content: <SampleCard />
    },
    {
      key: 5,
      content: <SampleCard />
    },
    {
      key: 6,
      content: <SampleCard />
    },
    {
      key: 7,
      content: <SampleCard />
    },
    {
      key: 8,
      content: <SampleCard />
    }
  ].map((slide, index) => {
    return { ...slide, onClick: () => this.setState({ changeSlide: index }) };
  });

  render() {
    return (
      <div style={{ width: "40%", height: "500px", margin: "0 auto" }}>
        <Carousel
          slides={this.slides}
          changeSlide={this.state.changeSlide}
          offsetRadius="10"
          animationConfig={config.gentle}
          showNavigation
        />
      </div>
    );
  }
}
export default ExampleCarousel;

Aquí, tenemos una lista (matriz) de tarjetas. Cada objeto de la lista tiene dos propiedades: clave y contenido.

Los valores de la propiedad clave deben ser únicos. El valor de la propiedad contenido se mostrará en el carrusel.

Luego aplicamos el método .map() para configurar el controlador de eventos onClick() para cada tarjeta en el carrusel. El método .map() genera una nueva matriz de objetos, que almacenaremos en la variable slides.

Haremos referencia a esta lista para mostrar un carrusel en JSX.

<Carousel
  slides={this.slides}
  changeSlide={this.state.changeSlide}
  animationConfig={config.gentle}
  showNavigation
/>

Primero, establecemos el atributo diapositivas en la matriz de objetos. También configuramos el cambioSlide al índice actual de la tarjeta actualmente en foco.

También configuramos el atributo animationConfig para una transición suave. Esto solo es posible porque importamos el módulo config del paquete react-spring.

La lista de cartas en el pergamino

Veamos la lista de tarjetas almacenadas en la propiedad diapositivas.

slides = [
    {
      key: 1,
      content: <SampleCard />
    },
    {
      key: 2,
      content: <SampleCard />
    },
    {
      key: 3,
      content: <SampleCard />
    },
    {
      key: 4,
      content: <SampleCard />
    },
    {
      key: 5,
      content: <SampleCard />
    },
    {
      key: 6,
      content: <SampleCard />
    },
    {
      key: 7,
      content: <SampleCard />
    },
    {
      key: 8,
      content: <SampleCard />
    }
  ].map((slide, index) => {
    return { ...slide, onClick: () => this.setState({ changeSlide: index }) };
  });

Cada objeto en la lista de diapositivas tiene una propiedad de contenido, que tiene un valor del componente <SampleCard />. El carrusel creará un scroll horizontal de contenido que especificamos aquí.

Por ejemplo, puede especificar un elemento cuadrado <div> y el carrusel los mostrará.

También puede establecer diferentes componentes para la propiedad de contenido de cada objeto en la matriz, y el carrusel mostrará diferentes tarjetas. En este caso, establecemos un componente <SampleCard /> para todos los objetos de la matriz.

También podemos pasar “accesorios” al componente para personalizar su comportamiento, funcionalidad y apariencia. Lea la documentación oficial de React para conocer los posibles casos de uso de accesorios.

Veamos el código del componente <SampleCard>.

const imageUrl =
    'https://play-lh.googleusercontent.com/yPtnkXQAn6yEahOurxuYZL576FDXWn3CqewVcEWJsXlega_nSiavBvmaXwfTGktGlQ';
export default class SampleCard extends React.Component {
  render = () => {
    return (
      <div>
        <img src={imageUrl} height='150' width='150'></img>
        <h1>Card title</h1>
      </div>
    );
  };
}

Si abre esta demostración en vivo en CodeSandbox, verá un desplazamiento horizontal de estas tarjetas. La estructura de estas tarjetas es bastante simple: tenemos una imagen y un texto <h1>.

La imagen es solo un ejemplo de cómo se vería la imagen de una tarjeta. Puede reemplazar la variable imageUrl con un enlace a cualquier otra imagen y verá los cambios.

Agregue elementos y estilos al contenedor principal <div> devuelto por el componente SampleCard para crear una tarjeta más compleja.