Reactstrap — Input Groups

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 input groups, jumbotrons, and layouts with Reactstrap.

Buttons and Dropdowns

We can add buttons and dropdowns as input group addons.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButtonDropdown,
  Input,
  Button,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = React.useState(false);
  const [splitButtonOpen, setSplitButtonOpen] = React.useState(false);

  const toggleDropDown = () => setDropdownOpen(!dropdownOpen);

  const toggleSplit = () => setSplitButtonOpen(!splitButtonOpen);

  return (
    <div>
      <InputGroup>
        <InputGroupAddon addonType="prepend">
          <Button>button</Button>
        </InputGroupAddon>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <Input />
        <InputGroupButtonDropdown
          addonType="append"
          isOpen={dropdownOpen}
          toggle={toggleDropDown}
        >
          <DropdownToggle caret>Button Dropdown</DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem disabled>Action</DropdownItem>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Action</DropdownItem>
          </DropdownMenu>
        </InputGroupButtonDropdown>
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupButtonDropdown
          addonType="prepend"
          isOpen={splitButtonOpen}
          toggle={toggleSplit}
        >
          <Button outline>Button</Button>
          <DropdownToggle split outline />
          <DropdownMenu>
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem disabled>Action</DropdownItem>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Action</DropdownItem>
          </DropdownMenu>
        </InputGroupButtonDropdown>
        <Input placeholder="name" />
        <InputGroupAddon addonType="append">
          <Button color="secondary">button</Button>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

We have the InputGroup with the InputGroupAddon component.

We have one with Button s inside and we can also add InputGroupButtonDropdown to add the button dropdown.

DropdownToggle has the dropdown toggle.

We can optionally make a split button with a Button and a DropdownToggle with the split prop.

The style cal be outlined with the outlined prop.

Jumbotron

We can add a jumbotron to display content in a way that gets people’s attention.

It gets attention by being bigger than other content.

To add a jumbotron, we use the Jumbotron component.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Jumbotron>
        <h1 className="display-3">Hello, world!</h1>
        <p className="lead">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut
          lectus tellus. Vestibulum vulputate id ex nec tincidunt. Pellentesque
          eu nunc finibus, bibendum magna sit amet, vulputate nunc.
        </p>
        <hr className="my-2" />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut
          lectus tellus. Vestibulum vulputate id ex nec tincidunt. Pellentesque
          eu nunc finibus, bibendum magna sit amet, vulputate nunc.
        </p>
        <p className="lead">
          <Button color="primary">Learn More</Button>
        </p>
      </Jumbotron>
    </div>
  );
}

We add the Jumbotron component with content inside.

We add class names to add margins.

Fluid Jumbotron

We can make the jumbotron fluid with the fluid prop.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Jumbotron fluid>
        <Container fluid>
          <h1 className="display-3">Fluid jumbotron</h1>
          <p className="lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut
            lectus tellus. Vestibulum vulputate id ex nec tincidunt.
            Pellentesque eu nunc finibus, bibendum magna sit amet, vulputate
            nunc.
          </p>
        </Container>
      </Jumbotron>
    </div>
  );
}

We have the Jumbotron and the Container set to fluid so that we can display the jumbotron responsively.

Layout Components

We can add layouts to our app with the Row and Col components.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Row, Col } from "reactstrap";

export default function App() {
  return (
    <div>
      <Container>
        <Row>
          <Col>.col</Col>
        </Row>
        <Row>
          <Col>.col</Col>
          <Col>.col</Col>
          <Col>.col</Col>
        </Row>
        <Row>
          <Col xs="3">.col-3</Col>
          <Col xs="auto">.col-auto - variable width content</Col>
          <Col xs="3">.col-3</Col>
        </Row>
        <Row>
          <Col sm={{ size: "auto", offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
          <Col sm={{ size: "auto", offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
        </Row>
      </Container>
    </div>
  );
}

We have the Row and Col components to create the grid.

Col can be sized with breakpoint props like xs to make it display the size we want given that the screen hits the given breakpoint or wider.

The prop takes a string or an object.

If it’s an object, the column size would be in the size property.

offset has the offset by the given distance.

Conclusion

We can add button groups and dropdowns to input groups.

Also, we can layout items with rows, columns, and jumbotrons.