Reactstrap — Carousels and Collapse

Image for post
Image for post
Photo by Fermin Rodriguez Penelas 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 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:

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:

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:

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:

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.

Image for post
Image for post
Photo by Tj Kolesnik on Unsplash

Conclusion

We can add carousels as an uncontrolled component.

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

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