Reactstrap — Dropdowns and Forms

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"
                  }
                };
              }
            }
          }}
        >
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Action</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </>
  );
}

We have the modifiers prop to change the height.

We have the setMaxHeight property that has an object with the enabled property to enable the modifier.

fn returns the style we want for styling the dropdown.

setActiveFromChild

We can use the setActiveFromChild prop to set the dropdown to active when any dropdown menu items are active.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Navbar,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default function App() {
  return (
    <>
      <Navbar color="light" light expand="md">
        <Nav className="ml-auto" navbar>
          <NavItem>
            <NavLink href="/home/">Inactive Link</NavLink>
          </NavItem>
          <UncontrolledDropdown setActiveFromChild>
            <DropdownToggle tag="a" className="nav-link" caret>
              Dropdown
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem tag="a" href="/foo" active>
                Link
              </DropdownItem>
            </DropdownMenu>
          </UncontrolledDropdown>
        </Nav>
      </Navbar>
    </>
  );
}

We have the setActiveFromChild prop to make it active.

Fade

We can use the Fade component to show a fade effect for transitions.

For example, we can write:

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

export default function App() {
  const [fadeIn, setFadeIn] = React.useState(true);

  const toggle = () => setFadeIn(!fadeIn);

  return (
    <div>
      <Button color="primary" onClick={toggle}>
        Toggle Fade
      </Button>
      <Fade in={fadeIn} tag="h5" className="mt-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet,
        lacus id rutrum euismod, nunc enim fringilla tortor, a suscipit turpis
        lacus dignissim mauris.
      </Fade>
    </div>
  );
}

We have the button to toggle the item in the Fade component.

This is done with the in prop.

It controls whether the item is displayed or not.

Form

Reactstrap comes with form components.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Form, FormGroup, Label, Input, FormText } from "reactstrap";

export default function App() {
  return (
    <div>
      <Form>
        <FormGroup>
          <Label for="email">Email</Label>
          <Input
            type="email"
            name="email"
            id="email"
            placeholder="placeholder"
          />
        </FormGroup>
        <FormGroup>
          <Label for="password">Password</Label>
          <Input
            type="password"
            name="password"
            id="password"
            placeholder="password placeholder"
          />
        </FormGroup>
        <FormGroup>
          <Label for="select">Select</Label>
          <Input type="select" name="select" id="select">
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </Input>
        </FormGroup>
        <FormGroup>
          <Label for="selectMulti">Select Multiple</Label>
          <Input type="select" name="selectMulti" id="selectMulti" multiple>
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </Input>
        </FormGroup>
        <FormGroup>
          <Label for="textarea">Text Area</Label>
          <Input type="textarea" name="text" id="textarea" />
        </FormGroup>
        <FormGroup>
          <Label for="file-input">File</Label>
          <Input type="file" name="file" id="file-input" />
          <FormText color="muted">placeholder</FormText>
        </FormGroup>
        <FormGroup tag="fieldset">
          <legend>Radio Buttons</legend>
          <FormGroup check>
            <Label check>
              <Input type="radio" name="fruit" /> apple
            </Label>
          </FormGroup>
          <FormGroup check>
            <Label check>
              <Input type="radio" name="fruit" /> orange
            </Label>
          </FormGroup>
          <FormGroup check disabled>
            <Label check>
              <Input type="radio" name="fruit" disabled /> grape
            </Label>
          </FormGroup>
        </FormGroup>
        <FormGroup check>
          <Label check>
            <Input type="checkbox" /> I agree
          </Label>
        </FormGroup>
        <Button>Submit</Button>
      </Form>
    </div>
  );
}

We have the form with the form groups.

Inside the form groups, we have the labels and inputs.

They’re all added with the Reactstrap components.

The tag prop lets us render form groups with a different tag.

The check prop lets us place checkboxes in the form group.

The Input component is used for adding all kinds of inputs.

The type of input is specified by the type prop.

Conclusion

We can set the modifiers prop to modify dropdowns.

Reactstrap comes with components for building forms.