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

Popovers

Popovers are elements that pop up when we trigger them to.

Reactstrap popovers are built with the react-popper library.

For instance, we can add one by adding:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap";

export default function App() {
  const [popoverOpen, setPopoverOpen] = React.useState(false);
  const toggle = () => setPopoverOpen(!popoverOpen);
  return (
    <div>
      <Button id="Popover" type="button">
        Launch Popover
      </Button>
      <Popover
        placement="bottom"
        isOpen={popoverOpen}
        target="Popover"
        toggle={toggle}
      >
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </PopoverBody>
      </Popover>
    </div>
  );
}

We add the Button component to let us trigger the popover.

The id is used with the target prop of the Popover to trigger it.

The Popover component has the popover.

The placement has the placement of the popover.

toggle is a function that lets us toggle the popover.

The PopoverHeader has the popover header.

And the PopoverBody has the popover body.

When we click the button, we should see the popover visible.

The isOpen prop controls whether the popover is shown.

#software-development #technology #web-development #programming #javascript