React Bootstrap — List Group Tabs and Modals

Image for post
Image for post
Photo by Steve Smith on Unsplash

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add list groups tabs and modals to a React app with React Bootstrap.

Tabbed Interfaces

We can use list groups as tab components.

To do that, we can put it in the Tab.Container component.

For instance, we can write:

to use the list group items as navigation links.

We set the defaultEventKey to set the default tab to display.

And we set the eventKey on each Tab.Pane to name them so that we can make links for them with the href prop on the ListGroup.Item .

Modals

Modals are dialog boxes that we can add on our site.

It can be used for notifications or custom content.

They’re positioned over everything else in the document and remove scroll from the body so that the modal content scrolls.

Modals are unmounted when closed.

We can only display one modal at a time.

Modals keep the keyboard focus on the modal.

We can make basic modal by using the Modalcomponents:

Modal.Dialog lets us display the dialog.

Modal.Header has the header.

closeButton adds the close button.

Modal.Title has the modal title.

Modal.Body has the modal body content.

Modal.Footer has the modal footer, where we can add some buttons if we wish.

Static Backdrop

We can use the Modal component and set the backdrop prop to static to make a static backdrop.

This way, we won’t close the modal if we click outside it.

For example, we can write:

backdrop set to static lets us disable closing with anything other than the close button.

We can only close if we click the close button.

We can’t click outside or press the Esc key to close it.

keyboard set to false disables closing with the Esc key.

The show prop is used to control when the modal is open or not.

We have the onHide prop to set the show state to false to close the modal.

Also, we have an open modal button to set the show state to true when we click it.

This will open the modal.

Conclusion

We can use list group items as tabs.

With the Modal component, we can add modals easily.

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

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