Reactstrap — Tabs and Toasts

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.

Conclusion

We can add tabs with a nav.

And we can add toasts to display popup notifications.