Reactstrap — Card Columns and Carousels

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to put cards into columns and add carousels with Reactstrap.

Columns

We can group cards into columns.

For example, we can write:

import React from "react";
import {
  Card,
  Button,
  CardImg,
  CardTitle,
  CardText,
  CardColumns,
  CardSubtitle,
  CardBody
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <CardColumns>
        <Card>
          <CardImg
            top
            width="100%"
            src="[http://placekitten.com/200/200](http://placekitten.com/200/200)"
            alt="Cat"
          />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            top
            width="100%"
            src="[http://placekitten.com/200/200](http://placekitten.com/200/200)"
            alt="Cat"
          />
        </Card>
        <Card>
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card
          body
          inverse
          style={{ backgroundColor: "#333", borderColor: "#333" }}
        >
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend.
          </CardText>
          <Button>Button</Button>
        </Card>
        <Card>
          <CardImg
            top
            width="100%"
            src="[http://placekitten.com/200/200](http://placekitten.com/200/200)"
            alt="Cat"
          />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card body inverse color="primary">
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend.
          </CardText>
          <Button color="secondary">Button</Button>
        </Card>
      </CardColumns>
    </div>
  );
}

We use the CardColumns component to group the columns together.

Carousel

Carousels let us display slideshows in our app.

To add one we use the Carousel andCarouselItem components to add the carousel and carousel items.

We can also use the CarouselIndicators and CarouselControl components to add the slide indicator and navigation controls.

To do all that, we can write:

import React from "react";
import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

const items = [
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 1",
    caption: "Slide 1"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 2",
    caption: "Slide 2"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 3",
    caption: "Slide 3"
  }
];

export default function App() {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [animating, setAnimating] = React.useState(false);

  const next = () => {
    if (animating) return;
    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
    setActiveIndex(nextIndex);
  };

  const previous = () => {
    if (animating) return;
    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
    setActiveIndex(nextIndex);
  };

  const goToIndex = newIndex => {
    if (animating) return;
    setActiveIndex(newIndex);
  };

  const slides = items.map(item => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={item.src}
      >
        <img src={item.src} alt={item.altText} />
        <CarouselCaption
          captionText={item.caption}
          captionHeader={item.caption}
        />
      </CarouselItem>
    );
  });

  return (
    <Carousel activeIndex={activeIndex} next={next} previous={previous}>
      <CarouselIndicators
        items={items}
        activeIndex={activeIndex}
        onClickHandler={goToIndex}
      />
      {slides}
      <CarouselControl
        direction="prev"
        directionText="Previous"
        onClickHandler={previous}
      />
      <CarouselControl
        direction="next"
        directionText="Next"
        onClickHandler={next}
      />
    </Carousel>
  );
}

We add the slides with the CarouselItem and CarouselCaption components.

CarouselCaption adds the caption text.

The CariyselIndicators have the slides in the items prop.

activeIndex has the index of the slide that’s active.

onClickHandler lets us jump to the given side by changing the index.

CarouselControl lets us add controls to move slides.

This is also done by changing the index of the active slide with the next and previous functions.

We set the animating state to false when we exit the slide.

Uncontrolled Carousel

If we don’t need to control the navigation ourselves, we can also add an uncontrolled carousel with the UncontrolledCarousel component.

For instance, we can write:

import React from "react";
import { UncontrolledCarousel } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

const items = [
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 1",
    caption: "Slide 1",
    header: "Slide 1 Header",
    key: "1"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 2",
    caption: "Slide 2",
    header: "Slide 2 Header",
    key: "2"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 3",
    caption: "Slide 3",
    header: "Slide 3 Header",
    key: "3"
  }
];

export default function App() {
  return <UncontrolledCarousel items={items} />;
}

We have the slide data with the image URL, caption, header, and alt text, and we pass them all into the items prop.

This will make a carousel that animates automatically.

Navigation controls and slide indicators are also provided.

Conclusion

We can add various kinds of sliders and group cards into columns.