Reactstrap — Popovers

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.

Popovers Trigger

We can also add a uncontrolled popover component.

We don’t need to change the popover’s isOpen state to control then popover.

For instance, we can write:

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

export default function App() {
  return (
    <div>
      <Button id="PopoverFocus" type="button">
        Launch Popover (Focus)
      </Button>
      <UncontrolledPopover
        trigger="focus"
        placement="bottom"
        target="PopoverFocus"
      >
        <PopoverHeader>Focus Popover</PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </PopoverBody>
      </UncontrolledPopover>
    </div>
  );
}

to create popover with a button that triggers the popover to be displayed.

We used the UncontrolledPopover component with the trigger and id props to avoid setting a state to control the popover.

trigger is the event to trigger the popover and target should be same as the trigger element’s id .

We can also trigger the popover on click by writing:

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

export default function App() {
  return (
    <div>
      <Button id="PopoverClick" type="button">
        Launch Popover (Click)
      </Button>
      <UncontrolledPopover
        trigger="click"
        placement="bottom"
        target="PopoverClick"
      >
        <PopoverHeader>Click Popover</PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </PopoverBody>
      </UncontrolledPopover>
    </div>
  );
}

We have the UncontrolledPopover with the target .

We set the trigger to click to make the popover display on click.

There’s also the legacy popover which is triggered by Reactstrap’s own trigger value.

For instance, we can write:

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

export default function App() {
  return (
    <div>
      <Button id="PopoverLegacy" type="button">
        Launch Popover
      </Button>
      <UncontrolledPopover
        trigger="legacy"
        placement="bottom"
        target="PopoverLegacy"
      >
        <PopoverHeader>Click Popover</PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </PopoverBody>
      </UncontrolledPopover>
    </div>
  );
}

We set trigger to legacy to make a legacy popover.

Conclusion

Popovers can be added with various triggers.

They can be controlled or uncontrolled/