Reactstrap — Modal Close Options

Image for post
Image for post
Photo by A.R.T.Paola 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.

Modals with a Custom Close Icon

We can change the close icon of the button with the charCode prop.

For instance, we can write:

We set the charCode prop to 'close' so that it’s displayed as the close button value.

Clean Up

We can change the cleanup options of our modal.

If the unmountOnClose options is false , then the data we entered into the modal stays available after we close it.

This is because it’s not completely unmounted.

For example, we can write:

to create a modal with a text area inside it.

When we type something, it’ll still be available after we close and open the modal again.

Focus After Close

We can make our modal focus on the button that opened it after it’s closed.

To do that, we set the returnFocusAfterClose to true .

For example, we can write:

Once we close the modal, the Open button will be focused.

This is because we have the returnFocusAfterClose prop added.

Conclusion

We can return focus to the element that opened the modal.

Also, the close button text and clean up options can be changed.

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