Reactstrap — Media List and Modals

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 media lists with Reactstrap.

Media List

We can add the list prop to the Media component to make it a list.

For example, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Media list>
        <Media tag="li">
          <Media left href="#">
            <Media object src="http://placekitten.com/201/201" alt="cat" />
          </Media>
          <Media body>
            <Media heading>Media heading</Media>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <Media>
              <Media left href="#">
                <Media object src="http://placekitten.com/201/201" alt="cat" />
              </Media>
              <Media body>
                <Media heading>Nested media heading</Media>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                <Media>
                  <Media left href="#">
                    <Media
                      object
                      src="http://placekitten.com/201/201"
                      alt="cat"
                    />
                  </Media>
                  <Media body>
                    <Media heading>Nested media heading</Media>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </Media>
                </Media>
              </Media>
            </Media>
            <Media>
              <Media left href="#">
                <Media object src="http://placekitten.com/201/201" alt="cat" />
              </Media>
              <Media body>
                <Media heading>Nested media heading</Media>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </Media>
            </Media>
          </Media>
        </Media>
        <Media tag="li">
          <Media body>
            <Media heading>Media heading</Media>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </Media>
          <Media right href="#">
            <Media object data-src="http://placekitten.com/201/201" alt="cat" />
          </Media>
        </Media>
      </Media>
    </div>
  );
}

to add a nested list with the Media component.

tag lets us set the tag to render the component as.

The list prop lets us render the Media component as a ul element.

Modals

We can add a modal with the Modal component.

For instance, we can write:

import React from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

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

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
          sollicitudin tortor eu velit laoreet, vitae eleifend ipsum aliquam.
          Vivamus porta est eu auctor sodales.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

We added a Button to let us open the modal.

This is done by clicking the toggle fucntion into the onClick prop.

It’ll set modal to true to open the modal.

modal is passed into the isOpen prop of the Modal to control the modal open state.

The toggle component lets us controls the toggle.

ModalHeader has the modal header.

ModalBody has the modal body.

ModalFooter has the modal footer.

Modal Backdrop

The modal backdrop can be controlled with the backdrop prop.

If we set it to false , then the backdrop is disabled.

For example, we can write:

import React from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

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

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal isOpen={modal} toggle={toggle} backdrop={false}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
          sollicitudin tortor eu velit laoreet, vitae eleifend ipsum aliquam.
          Vivamus porta est eu auctor sodales.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

Since the backdrop prop is set to false , there’s no backdrop when we open the modal.

We can also set it to 'static' to disable closing by clicking away or with the Esc key.

Conclusion

We can render the Media component as a list.

Also, we can add modals with various kinds of content and options.