Reactstrap — Tabs and Toasts

Image for post
Image for post
Photo by Russ Ward 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 tabs and toasts with Reactstrap.

Tabs

We can add tabs with the Nav component with the tabs prop.

The content of each tab can be added with the TabContent and TabPane components.

For instance, we can write:

to create our nav with the tab content.

We have a toggle component to set the active tab with the setActiveTab function when we click on a tab.

The activeTab is used to set the className of the link to active for the active tab.

The active class will set the styles for an active tab.

Toasts

Toasts are components that show notifications to the user.

To add them, we use the Toast , ToastBody , and ToastHeader component.

For instance, we can write:

to add a toast with a header and body.

Toast is the wrapper.

ToastHeader has the toast header.

ToastBody has the toast body.

The background can change depending on the style of its parent element.

For instance, we can write:

to set the div’s background to blue.

And the toast will have a light blue background.

We can replace bg-primary with all the other background class variants to change the background.

Header Icons

We can add an icon to the header of a toast.

For instance, we can write:

to add the icon prop to the ToastHeader .

We can also add a component instead of a string:

We added a spinner to the header.

Conclusion

We can add tabs with a nav.

And we can add toasts to display popup notifications.

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