Reactstrap — Media List and Modals

Image for post
Image for post
Photo by rafzin p on Unsplash

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:

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:

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:

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store