Category: Reactstrap

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 forms with Reactstrap.

Form Grid

We can put form components in a grid.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Form>
        <FormGroup row>
          <Label for="email" sm={2}>
            Email
          </Label>
          <Col sm={10}>
            <Input
              type="email"
              name="email"
              id="email"
              placeholder="placeholder"
            />
          </Col>
        </FormGroup>
        <FormGroup row>
          <Label for="password" sm={2}>
            Password
          </Label>
          <Col sm={10}>
            <Input
              type="password"
              name="password"
              id="password"
              placeholder="password placeholder"
            />
          </Col>
        </FormGroup>
        <FormGroup row>
          <Label for="select" sm={2}>
            Select
          </Label>
          <Col sm={10}>
            <Input type="select" name="select" id="select">
              <option>1</option>
              <option>2</option>
              <option>3</option>
            </Input>
          </Col>
        </FormGroup>
        <FormGroup row>
          <Label for="multiple" sm={2}>
            Select Multiple
          </Label>
          <Col sm={10}>
            <Input type="select" name="selectMulti" id="multiple" multiple>
              <option>1</option>
              <option>2</option>
              <option>3</option>
            </Input>
          </Col>
        </FormGroup>
        <FormGroup row>
          <Label for="text" sm={2}>
            Text Area
          </Label>
          <Col sm={10}>
            <Input type="textarea" name="text" id="text" />
          </Col>
        </FormGroup>
        <FormGroup row>
          <Label for="file" sm={2}>
            File
          </Label>
          <Col sm={10}>
            <Input type="file" name="file" id="file" />
            <FormText color="muted">placeholder</FormText>
          </Col>
        </FormGroup>
        <FormGroup tag="fieldset" row>
          <legend className="col-form-label col-sm-2">Radio Buttons</legend>
          <Col sm={10}>
            <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 disabled
              </Label>
            </FormGroup>
          </Col>
        </FormGroup>
        <FormGroup row>
          <Label for="checkbox2" sm={2}>
            Checkbox
          </Label>
          <Col sm={{ size: 12 }}>
            <FormGroup check>
              <Label check>
                <Input type="checkbox" id="checkbox2" /> Check me out
              </Label>
            </FormGroup>
          </Col>
        </FormGroup>
        <FormGroup check row>
          <Col sm={{ size: 12, offset: 2 }}>
            <Button>Submit</Button>
          </Col>
        </FormGroup>
      </Form>
    </div>
  );
}

We put the Col in a FormGroup so that we can place the form elements in a grid.

The row prop in the FormGroup makes the form group display as a row.

The col can have optional breakpoint props to set the size.

sm sets the column size to 10 if the screen is sm or wider.

Form Grid with Form Row

We can also use the Row component with the form prop to add a form row.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Form>
        <Row form>
          <Col md={6}>
            <FormGroup>
              <Label for="email">Email</Label>
              <Input
                type="email"
                name="email"
                id="email"
                placeholder="placeholder"
              />
            </FormGroup>
          </Col>
          <Col md={6}>
            <FormGroup>
              <Label for="password">Password</Label>
              <Input
                type="password"
                name="password"
                id="password"
                placeholder="password"
              />
            </FormGroup>
          </Col>
        </Row>
        <FormGroup>
          <Label for="address">Address</Label>
          <Input
            type="text"
            name="address"
            id="address"
            placeholder="address"
          />
        </FormGroup>
        <FormGroup>
          <Label for="address2">Address 2</Label>
          <Input
            type="text"
            name="address2"
            id="address2"
            placeholder="address 2"
          />
        </FormGroup>
        <Row form>
          <Col md={6}>
            <FormGroup>
              <Label for="city">City</Label>
              <Input type="text" name="city" id="city" />
            </FormGroup>
          </Col>
          <Col md={4}>
            <FormGroup>
              <Label for="region">Region</Label>
              <Input type="text" name="region" id="region" />
            </FormGroup>
          </Col>
          <Col md={2}>
            <FormGroup>
              <Label for="postal">Postal Code</Label>
              <Input type="text" name="postal" id="postal" />
            </FormGroup>
          </Col>
        </Row>
        <FormGroup check>
          <Input type="checkbox" name="check" id="checkbox" />
          <Label for="checkbox" check>
            I agree
          </Label>
        </FormGroup>
        <Button>Sign up</Button>
      </Form>
    </div>
  );
}

We have the Row component instead of a FormGroup in some places.

The form prop makes it a form row.

Inline Form

We can make an inline form with the inline prop on the Form .

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Form inline>
        <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
          <Label for="email" className="mr-sm-2">
            Email
          </Label>
          <Input
            type="email"
            name="email"
            id="email"
            placeholder="email@email.cool"
          />
        </FormGroup>
        <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
          <Label for="password" className="mr-sm-2">
            Password
          </Label>
          <Input
            type="password"
            name="password"
            id="password"
            placeholder="password"
          />
        </FormGroup>
        <Button>Submit</Button>
      </Form>
    </div>
  );
}

to make form fields inline with the inline prop.

We should add some margin classes to space out the labels and input boxes.

Conclusion

We can add forms with the content displayed our way.

The layout and spacing can change.

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.