Reactstrap — Modal Options

Image for post
Image for post
Photo by Joe Caione 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 modals with Reactstrap.

Nested Modals

We can add nested modals with Reactstrap.

For instance, we can write:

We have the Modal component inside another Modal component to display our nested modal.

The inner one will show on top of the outer one.

We have states to open and close each modal and we pass that to the isOpen prop.

Modals with Custom Transition Timeouts

The transition duration can change with Reactstrap modals.

For instance,e we write:

to change the modal and backdrop transition durations.

modalTransition takes an object with the timeout property to change how long to wait until the modal is displayed.

Likewise, we have the backdropTransition prop that also has the timeout property to change the wait time until when the backdrop is displayed.

All the times are in milliseconds.

Modals with External Button

We can add an external component as the close button for the modal.

All we have to do is to set the external prop of the Modal .

For example, we can write:

to add the external component to the external prop of the modal.

Image for post
Image for post
Photo by Rachel Park on Unsplash

Conclusion

We can change various options of the modal.

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