Reactstrap — Carousels and Collapse

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 add carousels and collapse components with Reactstrap.

Carousel Using a Tag and Class Name

We can change the tag and the class name that’s rendered in a carousel item.

For example, we can write:

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

const items = [
  {
    id: 1,
    altText: "Slide 1",
    caption: "Slide 1"
  },
  {
    id: 2,
    altText: "Slide 2",
    caption: "Slide 2"
  },
  {
    id: 3,
    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
        className="custom-tag"
        tag="div"
        key={item.id}
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
      >
        <CarouselCaption
          className="text-warning"
          captionText={item.caption}
          captionHeader={item.caption}
        />
      </CarouselItem>
    );
  });

  return (
    <div>
      <style>
        {`.custom-tag {
          max-width: 100%;
          height: 500px;
          background: black;
        }`}
      </style>
      <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>
    </div>
  );
}

We have the items array to generate the slides from it.

CarouselCaption has the caption.

We set the className to style the text.

CarouselItem also has the className and tag to set the class name and render the slide element with the given tag.

Collapse

We can use the Collapse component to make a toggleable component.

For example, we can write:

import React from "react";
import { Collapse, Button, CardBody, Card } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <Button color="warning" onClick={toggle} style={{ marginBottom: "1rem" }}>
        Toggle
      </Button>
      <Collapse isOpen={isOpen}>
        <Card>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus
            orci luctus et ultrices posuere cubilia curae; Mauris ultrices justo
            quis sapien faucibus ultricies.
          </CardBody>
        </Card>
      </Collapse>
    </div>
  );
}

We set the color prop to the style we want on the button.

The content is in the Collapse component, which takes the isOpen prop set to the isOpen state.

We have a toggle function to toggle the Collapse component when it’s clicked.

Events

Collapse takes more props.

The onEntering prop that’s run when it’s being shown.

onEntered runs when the collapse component is displayed.

onExiting runs when the collapse component is toggling off.

onExited runs when the collapse component is toggled off.

For example, we can write:

import React from "react";
import { Collapse, Button, CardBody, Card } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [collapse, setCollapse] = React.useState(false);
  const [status, setStatus] = React.useState("Closed");

  const onEntering = () => setStatus("Opening");

  const onEntered = () => setStatus("Opened");

  const onExiting = () => setStatus("Closing");

  const onExited = () => setStatus("Closed");

  const toggle = () => setCollapse(!collapse);

  return (
    <div>
      <Button color="primary" onClick={toggle} className="mb-1">
        Toggle
      </Button>
      <p>Current state: {status}</p>
      <Collapse
        isOpen={collapse}
        onEntering={onEntering}
        onEntered={onEntered}
        onExiting={onExiting}
        onExited={onExited}
      >
        <Card>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend.
          </CardBody>
        </Card>
      </Collapse>
    </div>
  );
}

We pass in functions to all those props to display set the status state so that we can display it.

Uncontrolled Collapse

If we only need a collapsible component without the need to control the toggling programmatically, then we can use the UncontrolledCollapse component.

For example, we can write:

import React from "react";
import { UncontrolledCollapse, Button, CardBody, Card } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div>
      <Button color="primary" id="toggler" className="mb-2">
        Toggle
      </Button>
      <UncontrolledCollapse toggler="#toggler">
        <Card>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend.
          </CardBody>
        </Card>
      </UncontrolledCollapse>
    </div>
  );
}

As long as the ID of the button matches the selector in the toggler prop of the UncontrolledCollapse component, the toggling will be done by the button.

Conclusion

We can add carousels as an uncontrolled component.

Also, we can add a collapse component to add a toggleable container.