Category: Reactstrap

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 tooltips with Reactstrap.

Tooltips

We can add tooltips with Reactstrap.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Tooltip } from "reactstrap";
export default function App() {
  const [tooltipOpen, setTooltipOpen] = React.useState(false);

  const toggle = () => setTooltipOpen(!tooltipOpen);

  return (
    <div>
      <p>
        <span
          style={{ textDecoration: "underline", color: "blue" }}
          href="#"
          id="Tooltip"
        >
          tooltip
        </span>
      </p>
      <Tooltip
        placement="right"
        isOpen={tooltipOpen}
        target="Tooltip"
        toggle={toggle}
      >
        Hello world
      </Tooltip>
    </div>
  );
}

to add a tooltip trigger span element.

The id of the span should match the value of the target prop of the Tooltip .

The Tooltip component also takes the placement , isOpen and toggle props.

isOpen has the open state of the tooltip.

toggle has the function to toggle the tooltip.

Tooltip Disable Autohide

We can disable autohide with the autohide prop set to false .

So we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Tooltip } from "reactstrap";
export default function App() {
  const [tooltipOpen, setTooltipOpen] = React.useState(false);

const toggle = () => setTooltipOpen(!tooltipOpen);

return (
    <div>
      <p>
        <span
          style={{ textDecoration: "underline", color: "blue" }}
          href="#"
          id="Tooltip"
        >
          tooltip
        </span>
      </p>
      <Tooltip
        placement="right"
        isOpen={tooltipOpen}
        target="Tooltip"
        toggle={toggle}
        autohide={false}
      >
        Hello world
      </Tooltip>
    </div>
  );
}

Tooltips Placement

We can change the placement of the tooltip with the placement prop.

So we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Tooltip } from "reactstrap";
export default function App() {
  const [tooltipOpen, setTooltipOpen] = React.useState(false);

  const toggle = () => setTooltipOpen(!tooltipOpen);

  return (
    <div>
      <p>
        <span
          style={{ textDecoration: "underline", color: "blue" }}
          href="#"
          id="Tooltip"
        >
          tooltip
        </span>
      </p>
      <Tooltip
        placement="bottom"
        isOpen={tooltipOpen}
        target="Tooltip"
        toggle={toggle}
      >
        Hello world
      </Tooltip>
    </div>
  );
}

We can set the placement prop to left , right , bottom or top .

Uncontrolled Tooltip

We can add the UncontrolledTooltip to add a tooltip if we don’t need to control the tooltip state programmatically.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { UncontrolledTooltip } from "reactstrap";

export default function App() {
  return (
    <div>
      <p>
        <span
          style={{ textDecoration: "underline", color: "blue" }}
          href="#"
          id="Tooltip"
        >
          tooltip
        </span>
      </p>
      <UncontrolledTooltip placement="right" target="Tooltip">
        Hello world
      </UncontrolledTooltip>
    </div>
  );
}

to add the UncontrolledTooltip component.

The id of the trigger element should match the target of the UncontrolledTooltip .

Repositioning Tooltips

A tooltip can be repositioned on the fly with the scgheduleUpdate function.

For instance, if we toggle between short and long text in our tooltip as follows:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { UncontrolledTooltip } from "reactstrap";

const shortText = "Hi";
const longText =
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus fermentum lacus";

const TooltipContent = ({ scheduleUpdate }) => {
  const [text, setText] = React.useState(shortText);

  React.useEffect(() => {
    const intervalId = setInterval(() => {
      setText(text === shortText ? longText : shortText);
      scheduleUpdate();
    }, 2000);

    return () => clearInterval(intervalId);
  });

  return <>{text}</>;
};

export default function App() {
  return (
    <div>
      <p>
        <span
          style={{ textDecoration: "underline", color: "blue" }}
          href="#"
          id="Tooltip"
        >
          tooltip
        </span>
      </p>
      <UncontrolledTooltip placement="top" target="Tooltip" trigger="click">
        {({ scheduleUpdate }) => (
          <TooltipContent scheduleUpdate={scheduleUpdate} />
        )}
      </UncontrolledTooltip>
    </div>
  );
}

Then if we run scheduleUpdate as we did in the setInterval callback, we’ll see the tooltip automatically reposition itself as the text changes.

Conclusion

We can add a tooltip either as a controlled or uncontrolled components.

They can be repositioned on the fly.

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.

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 tables with Reactstrap.

Tables

Reactstrap comes with its own table component.

For instance, we can use it by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";

export default function App() {
  return (
    <div>
      <Table>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>mary</td>
            <td>wong</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>larry</td>
            <td>jones</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

We just add the Table component and use the usual table elements inside it to create our table.

By default, it’ll have a bottom border.

Dark Table

We can make the background dark with the dark prop.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";

export default function App() {
  return (
    <div>
      <Table dark>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>mary</td>
            <td>wong</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>larry</td>
            <td>jones</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

Striped Rows

We can make the rows striped with the striped prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";

export default function App() {
  return (
    <div>
      <Table striped>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>mary</td>
            <td>wong</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>larry</td>
            <td>jones</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

Bordered Table

We can add borders to the cells with the bordered prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";

export default function App() {
  return (
    <div>
      <Table bordered>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>mary</td>
            <td>wong</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>larry</td>
            <td>jones</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

Borderless Table

We can make the cells borderless with the borderless prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";

export default function App() {
  return (
    <div>
      <Table borderless>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>mary</td>
            <td>wong</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>larry</td>
            <td>jones</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

Hoverable Rows

The rows can be made hoverable with the hover prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";

export default function App() {
  return (
    <div>
      <Table hover>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>mary</td>
            <td>wong</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>larry</td>
            <td>jones</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

Small Table

To make the rows smaller, we can set the size prop to sm :

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";

export default function App() {
  return (
    <div>
      <Table size="sm">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>mary</td>
            <td>wong</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>larry</td>
            <td>jones</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

Responsive Table

We can make a table responsive with the responsive prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";

export default function App() {
  return (
    <div>
      <Table responsive>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>mary</td>
            <td>wong</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>larry</td>
            <td>jones</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

Now it’ll display properly on any screen.

Conclusion

Reactstrap provides us with a simple Table component to display tables.

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 a progress bar with Reactstrap.

Progress

We can add a progress bar with the Progress component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress value={2 * 20} />
      <Progress color="success" value="25" />
      <Progress color="info" value={50} />
      <Progress color="warning" value={75} />
      <Progress color="danger" value="100" />
    </div>
  );
}

to display various progress bars.

The value prop lets us change the amount of the bar that’s filled.

color has the color and they’re the variants that are shown.

Multiple Segments

We can create a progress bar that has multiple segments.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress multi>
        <Progress bar value="15">
          foo
        </Progress>
        <Progress bar color="success" value="30">
          bar
        </Progress>
        <Progress bar color="info" value="25">
          baz
        </Progress>
        <Progress bar color="warning" value="20">
          qux
        </Progress>
        <Progress bar color="danger" value="5">
          !!
        </Progress>
      </Progress>
    </div>
  );
}

We have a Progress components that wraps around other Progress components.

The multi prop lets us add a progress bar with multiple segments.

The inner bars has the bar component with the color to specify their color.

The value is the value out of 100.

Striped

We can make a progress bar striped with the striped prop.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress striped color="info" value={50} />
    </div>
  );
}

to add a striped progress bar.

This also works with progress bars with multiple segments:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress multi>
        <Progress striped bar value="10" />
        <Progress striped bar color="success" value="20" />
        <Progress striped bar color="warning" value="30" />
        <Progress striped bar color="danger" value="20" />
      </Progress>
    </div>
  );
}

We’ve to add the striped prop to each bar.

Animated

We can make the progress bar animated by using the animated prop.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress animated color="info" value={50} />
    </div>
  );
}

to make it animated.

We can do the same thing with multi-segment progress bars:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress multi>
        <Progress animated bar value="10" />
        <Progress animated bar color="success" value="20" />
        <Progress animated bar color="warning" value="30" />
        <Progress animated bar color="danger" value="20" />
      </Progress>
    </div>
  );
}

the animated prop is applied to each segment.

Conclusion

We can add a progress bar with multiple segments and different colors.

They can also be striped or animated.

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 a progress bar and spinners with Reactstrap.

Max Value

We can change the max value of a progress bar.

To do that, we change the max prop.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress value={50} max="200" />
    </div>
  );
}

We set max to 200 so that if the bar is full, the value will be 200.

If we have a segmented progress bar, we have to set the max value of each segment individually.

For instance, we write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress multi>
        <Progress bar value="5" max={10}>
          5
        </Progress>
        <Progress bar color="success" value="15" max={200}>
          15
        </Progress>
        <Progress bar color="warning" value="10" max={200}>
          10
        </Progress>
        <Progress bar color="danger" value="10" max={200}>
          10
        </Progress>
      </Progress>
    </div>
  );
}

Each segment’s bar width is calculated individually so their max value don’t influence each other.

Spinners

We can add a spinner by using the Spinner component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner } from "reactstrap";

export default function App() {
  return (
    <div>
      <Spinner color="primary" />
    </div>
  );
}

to add the Spinner component and set the color with the color prop.

Other values for color include secondary , success , danger , warning , info , light or dark .

Growing Spinner

We can add a growing spinner with the type prop set to grow .

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner } from "reactstrap";

export default function App() {
  return (
    <div>
      <Spinner type="grow" color="primary" />
    </div>
  );
}

Sizes

The size can change with the size prop.

So we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner } from "reactstrap";

export default function App() {
  return (
    <div>
      <Spinner size="sm" color="primary" />
    </div>
  );
}

sm means small and lg means large.

We can also change the width and height individually:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner } from "reactstrap";

export default function App() {
  return (
    <div>
      <Spinner style={{ width: "5rem", height: "5rem" }} color="primary" />
    </div>
  );
}

We make it big by changing the width and height properties of the style object.

We can add all variants of a spinner by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner } from "reactstrap";

export default function App() {
  return (
    <div>
      <Spinner color="primary" />
      <Spinner color="secondary" />
      <Spinner color="success" />
      <Spinner color="danger" />
      <Spinner color="warning" />
      <Spinner color="info" />
      <Spinner color="light" />
      <Spinner color="dark" />
    </div>
  );
}

Conclusion

We can change the max value of a progress bar.

And we can add a loading spinner with the Spinner component.