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:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
TabContent,
TabPane,
Nav,
NavItem,
NavLink,
Card,
Button,
CardTitle,
CardText,
Row,
Col
} from "reactstrap";
export default function App() {
const [activeTab, setActiveTab] = React.useState("1");
const toggle = tab => {
if (activeTab !== tab) setActiveTab(tab);
};
return (
<div>
<Nav tabs>
<NavItem>
<NavLink
className={activeTab === "1" ? "active" : ""}
onClick={() => {
toggle("1");
}}
>
Tab1
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === "2" ? "active" : ""}
onClick={() => {
toggle("2");
}}
>
More Tabs
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<Row>
<Col sm="12">
<h4>Tab 1 Contents</h4>
</Col>
</Row>
</TabPane>
<TabPane tabId="2">
<Row>
<Col sm="12">
<h4>Tab 2 Contents</h4>
</Col>
</Row>
</TabPane>
</TabContent>
</div>
);
}

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:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Toast, ToastBody, ToastHeader } from "reactstrap";
export default function App() {
return (
<div>
<Toast>
<ToastHeader>Title</ToastHeader>
<ToastBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
fermentum lacus.
</ToastBody>
</Toast>
</div>
);
}

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:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Toast, ToastBody, ToastHeader } from "reactstrap";
export default function App() {
return (
<div className="p-3 bg-primary my-2 rounded">
<Toast>
<ToastHeader>Title</ToastHeader>
<ToastBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
fermentum lacus.
</ToastBody>
</Toast>
</div>
);
}

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:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Toast, ToastBody, ToastHeader } from "reactstrap";
export default function App() {
return (
<div>
<Toast>
<ToastHeader icon="dark">Title</ToastHeader>
<ToastBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
fermentum lacus.
</ToastBody>
</Toast>
</div>
);
}

to add the icon prop to the ToastHeader .

We can also add a component instead of a string:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Toast, ToastBody, ToastHeader, Spinner } from "reactstrap";
export default function App() {
return (
<div>
<Toast>
<ToastHeader icon={<Spinner size="sm" />}>Title</ToastHeader>
<ToastBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
fermentum lacus.
</ToastBody>
</Toast>
</div>
);
}

We added a spinner to the header.

Image for post
Image for post
Photo by Pixzolo Photography on Unsplash

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