Reactstrap — Button Dropdowns

Photo by Iñigo De la Maza 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 button dropdowns with Reactstrap.

Button Dropdown

We can add a button dropdown with the ButtonDropdown component.

For example, we can write:

import React from "react";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  const [dropdownOpen, setOpen] = React.useState(false);
  const toggle = () => setOpen(!dropdownOpen);
  return (
    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>Button Dropdown</DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>item 1</DropdownItem>
        <DropdownItem disabled>item 2</DropdownItem>
        <DropdownItem>item 3</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>item 4</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

to add the button dropdown.

We add the ButtonDropdown component with the isOpen prop controlling when it’s open.