Reactstrap — Dropdowns and Forms

Photo by Hans Vivek 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 dropdowns and forms with Reactstrap.

Modifiers

We can add modifiers to style our dropdown.

To do that, we use the modifiers prop to change the dropdown:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";
export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);
const toggle = () => setIsOpen(prevState => !prevState);
return (
    <>
      <Dropdown isOpen={isOpen} toggle={toggle}>
        <DropdownToggle>Dropdown</DropdownToggle>
        <DropdownMenu
          modifiers={{
            setMaxHeight: {
              enabled: true,
              order: 890,
              fn: data => {
                return {
                  ...data,
                  styles: {
                    ...data.styles,
                    overflow: "auto",
                    maxHeight: "100px"
                  }
                };
              }
            }
          }}
        >…