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 customize cards with Reactstrap.

Header and Footer

We can add headers and booters to cards.

For example, we can write:

import React from "react";
import {
  Card,
  Button,
  CardHeader,
  CardFooter,
  CardBody,
  CardTitle,
  CardText
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Card>
        <CardHeader>Header</CardHeader>
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardFooter>Footer</CardFooter>
      </Card>

      <Card>
        <CardHeader tag="h3">Featured</CardHeader>
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardFooter className="text-muted">Footer</CardFooter>
      </Card>
    </div>
  );
}

We have the CardHeader and CardFooter components to display the header and footer.

Image Caps

We can add images with the CardImg component.

Then we can align them with the top and bottom props.

For example, we can write:

import React from "react";
import {
  Card,
  Button,
  CardHeader,
  CardFooter,
  CardBody,
  CardTitle,
  CardText,
  CardImg
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Card>
        <CardImg
          top
          width="100%"
          src="http://placekitten.com/200/200"
          alt="Cat"
        />
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardFooter>Footer</CardFooter>
      </Card>

      <Card>
        <CardHeader tag="h3">Featured</CardHeader>
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardImg
          bottom
          width="100%"
          src="http://placekitten.com/200/200"
          alt="Cat"
        />
      </Card>
    </div>
  );
}

The CardImg can be placed on the card.

The top and bottom props place make the images flush to the edges.

Image Overlays

We can place images below the text with the CardImgOverlay component.

For example, we can write:

import React from "react";
import { Card, CardImgOverlay, CardTitle, CardText, CardImg } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Card inverse>
        <CardImg width="100%" src="http://placekitten.com/200/200" alt="Cat" />
        <CardImgOverlay>
          <CardTitle>Card Title</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus
            orci luctus et ultrices posuere cubilia curae; Mauris ultrices justo
            quis sapien faucibus ultricies. Phasellus vitae urna in mi euismod
            sagittis ac non nunc.
          </CardText>
          <CardText>
            <small className="text-muted">Last updated 10 mins ago</small>
          </CardText>
        </CardImgOverlay>
      </Card>
    </div>
  );
}

We have the inverse prop to change the text color to white.

All the content is placed into the CardImgOverlay so that they’re placed above the image.

Background Variants

We can change the style variants of the cards.

To do that, we set the color prop:

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

export default function App() {
  return (
    <div className="App">
      <Card
        body
        inverse
        style={{ backgroundColor: "#333", borderColor: "#333" }}
      >
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button>Button</Button>
      </Card>
      <Card body inverse color="primary">
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button color="secondary">Button</Button>
      </Card>
      <Card body inverse color="success">
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button color="secondary">Button</Button>
      </Card>
      <Card body inverse color="info">
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button color="secondary">Button</Button>
      </Card>
      <Card body inverse color="warning">
        <CardTitle> Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button color="secondary">Button</Button>
      </Card>
      <Card body inverse color="danger">
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button color="secondary">Button</Button>
      </Card>
    </div>
  );
}

We set the color prop to the color we want.

We add the body prop to set the card to the body.

inverse change the content color to white.

Conclusion

We can add headers, footers, images, and overlays to cards.

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 put cards into columns and add carousels with Reactstrap.

Columns

We can group cards into columns.

For example, we can write:

import React from "react";
import {
  Card,
  Button,
  CardImg,
  CardTitle,
  CardText,
  CardColumns,
  CardSubtitle,
  CardBody
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <CardColumns>
        <Card>
          <CardImg
            top
            width="100%"
            src="[http://placekitten.com/200/200](http://placekitten.com/200/200)"
            alt="Cat"
          />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            top
            width="100%"
            src="[http://placekitten.com/200/200](http://placekitten.com/200/200)"
            alt="Cat"
          />
        </Card>
        <Card>
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card
          body
          inverse
          style={{ backgroundColor: "#333", borderColor: "#333" }}
        >
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend.
          </CardText>
          <Button>Button</Button>
        </Card>
        <Card>
          <CardImg
            top
            width="100%"
            src="[http://placekitten.com/200/200](http://placekitten.com/200/200)"
            alt="Cat"
          />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card body inverse color="primary">
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend.
          </CardText>
          <Button color="secondary">Button</Button>
        </Card>
      </CardColumns>
    </div>
  );
}

We use the CardColumns component to group the columns together.

Carousel

Carousels let us display slideshows in our app.

To add one we use the Carousel andCarouselItem components to add the carousel and carousel items.

We can also use the CarouselIndicators and CarouselControl components to add the slide indicator and navigation controls.

To do all that, we can write:

import React from "react";
import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

const items = [
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 1",
    caption: "Slide 1"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 2",
    caption: "Slide 2"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 3",
    caption: "Slide 3"
  }
];

export default function App() {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [animating, setAnimating] = React.useState(false);

  const next = () => {
    if (animating) return;
    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
    setActiveIndex(nextIndex);
  };

  const previous = () => {
    if (animating) return;
    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
    setActiveIndex(nextIndex);
  };

  const goToIndex = newIndex => {
    if (animating) return;
    setActiveIndex(newIndex);
  };

  const slides = items.map(item => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={item.src}
      >
        <img src={item.src} alt={item.altText} />
        <CarouselCaption
          captionText={item.caption}
          captionHeader={item.caption}
        />
      </CarouselItem>
    );
  });

  return (
    <Carousel activeIndex={activeIndex} next={next} previous={previous}>
      <CarouselIndicators
        items={items}
        activeIndex={activeIndex}
        onClickHandler={goToIndex}
      />
      {slides}
      <CarouselControl
        direction="prev"
        directionText="Previous"
        onClickHandler={previous}
      />
      <CarouselControl
        direction="next"
        directionText="Next"
        onClickHandler={next}
      />
    </Carousel>
  );
}

We add the slides with the CarouselItem and CarouselCaption components.

CarouselCaption adds the caption text.

The CariyselIndicators have the slides in the items prop.

activeIndex has the index of the slide that’s active.

onClickHandler lets us jump to the given side by changing the index.

CarouselControl lets us add controls to move slides.

This is also done by changing the index of the active slide with the next and previous functions.

We set the animating state to false when we exit the slide.

Uncontrolled Carousel

If we don’t need to control the navigation ourselves, we can also add an uncontrolled carousel with the UncontrolledCarousel component.

For instance, we can write:

import React from "react";
import { UncontrolledCarousel } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

const items = [
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 1",
    caption: "Slide 1",
    header: "Slide 1 Header",
    key: "1"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 2",
    caption: "Slide 2",
    header: "Slide 2 Header",
    key: "2"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 3",
    caption: "Slide 3",
    header: "Slide 3 Header",
    key: "3"
  }
];

export default function App() {
  return <UncontrolledCarousel items={items} />;
}

We have the slide data with the image URL, caption, header, and alt text, and we pass them all into the items prop.

This will make a carousel that animates automatically.

Navigation controls and slide indicators are also provided.

Conclusion

We can add various kinds of sliders and group cards into columns.

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

Button Groups

Button groups is a container for grouping buttons together.

For example, we can write:

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

export default function App() {
  return (
    <>
      <ButtonGroup>
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </>
  );
}

We add the ButtonGroup component with a few Button s inside.

They’ll be displayed side by side without any gaps in between them.

Button Toolbar

To group button groups, we can use the ButtonToolbar component.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <ButtonToolbar>
        <ButtonGroup>
          <Button>1</Button>
          <Button>2</Button>
          <Button>3</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button>4</Button>
          <Button>5</Button>
          <Button>6</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button>7</Button>
          <Button>8</Button>
          <Button>9</Button>
        </ButtonGroup>
      </ButtonToolbar>
    </>
  );
}

We put our ButtonGroups inside the ButtonToolbar .

There won’t be any spaces between the button groups.

Sizing

We can change the sizing of the button group.

To do that, we use the size prop.

For example, we can write:

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

export default function App() {
  return (
    <>
      <ButtonGroup size="lg">
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>

      <ButtonGroup>
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>

      <ButtonGroup size="sm">
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>
    </>
  );
}

We set size to lg to make the buttons large.

And we set size to sm to make the buttons small.

Omitting the size prop means we set the size to the default.

Nesting

We can nest ButtonDropdown s in ButtonGroup s.

For example, we can write:

import React from "react";
import {
  Button,
  ButtonGroup,
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <>
      <ButtonGroup>
        <Button>foo</Button>
        <Button>bar</Button>
        <ButtonDropdown isOpen={isOpen} toggle={toggle}>
          <DropdownToggle caret>Dropdown</DropdownToggle>
          <DropdownMenu>
            <DropdownItem>Link</DropdownItem>
            <DropdownItem>Link</DropdownItem>
          </DropdownMenu>
        </ButtonDropdown>
      </ButtonGroup>
    </>
  );
}

We have the ButtonDropdown in our ButtonGroup .

isOpen is the dropdown open state.

toggle lets us toggle the dropdown open state.

Vertical Variation

We can add the vertical prop to make the button group vertical.

For example, we can write:

import React from "react";
import {
  Button,
  ButtonGroup,
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <>
      <ButtonGroup vertical>
        <Button>foo</Button>
        <Button>bar</Button>
        <ButtonDropdown isOpen={isOpen} toggle={toggle}>
          <DropdownToggle caret>Dropdown</DropdownToggle>
          <DropdownMenu>
            <DropdownItem>Link</DropdownItem>
            <DropdownItem>Link</DropdownItem>
          </DropdownMenu>
        </ButtonDropdown>
      </ButtonGroup>
    </>
  );
}

to make the button group vertical.

Conclusion

We can add button groups to group buttons together.

Also, we can add button toolbars to add button 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 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.

toggle has the function to toggle the dropdown on or off.

DropdownToggle has the dropdown toggle button.

DropdownMenu has the dropdown menu.

DropdownItem has the dropdown item.

header makes an item styled as the header.

disabled makes it disabled.

divider adds a divider.

caret adds the down arrow to the toggle button.

We can change the color prop to change style of the button.

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 color="primary">
        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 color prop and set it to 'primary' .

This will make the dropdown toggle button blue.

Split Button Dropdowns

We can add a split toggle button for the dropdown toggle.

We can do that by adding a Button and DropdownToggle buttons.

For example, we write:

import React from "react";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} 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}>
      <Button id="caret" color="primary">
        button
      </Button>
      <DropdownToggle caret color="primary" />
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem disabled>Action</DropdownItem>
        <DropdownItem>Another Action</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Another Action</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

We add the ButtonDropdown component with the Button inside.

Also, we have the DropdownToggle with the caret to show the down arrow.

Now we can only click on the DropdownToggle to click the dropdown.

Sizing

The size of the dropdown toggle button can change.

To change it, we use the size prop.

For instance, we can write:

import React from "react";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} 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 size="lg">
        Large Button
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem> Action</DropdownItem>
        <DropdownItem> Action</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

We gave the size prop on the DropdownToggle set to lg to make it large.

Also, we can set the toggle size to sm to make it small:

import React from "react";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} 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 size="sm">
        Small Button
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem> Action</DropdownItem>
        <DropdownItem> Action</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

Uncontrolled Dropdown

A button dropdown can be uncontrolled.

We can import the UncontrolledButtonDropdown to add one:

import React from "react";
import {
  UncontrolledButtonDropdown,
  DropdownMenu,
  DropdownItem,
  DropdownToggle
} from "reactstrap";

import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <UncontrolledButtonDropdown>
      <DropdownToggle caret>Dropdown</DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Action</DropdownItem>
        <DropdownItem disabled>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Action</DropdownItem>
      </DropdownMenu>
    </UncontrolledButtonDropdown>
  );
}

We use the UncontroleldButtonDropdown without any props.

It’ll toggle the dropdown on and off without setting any props.

If we don’t need to manipulate the dropdown programmatically then we can use this.

Drop Direction Variations

The menu can be displayed in any direction.

It can show above the button, or to the right or left, in addition to being below the button.

For instance, we can write:

import React from "react";
import {
  ButtonDropdown,
  DropdownMenu,
  DropdownItem,
  DropdownToggle
} from "reactstrap";

import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [isOpenLeft, setOpenLeft] = React.useState(false);
  const [isOpenRight, setOpenRight] = React.useState(false);
  const [isOpenUp, setOpenUp] = React.useState(false);

const toggleLeft = () => setOpenLeft(!isOpenLeft);
  const toggleRight = () => setOpenRight(!isOpenRight);
  const toggleUp = () => setOpenUp(!isOpenUp);

  return (
    <>
      <ButtonDropdown direction="up" isOpen={isOpenUp} toggle={toggleUp}>
        <DropdownToggle caret>Dropup</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Another Action</DropdownItem>
          <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
      </ButtonDropdown>

      <ButtonDropdown direction="left" isOpen={isOpenLeft} toggle={toggleLeft}>
        <DropdownToggle caret>Dropleft</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Another Action</DropdownItem>
          <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
      </ButtonDropdown>

      <ButtonDropdown
        direction="right"
        isOpen={isOpenRight}
        toggle={toggleRight}
      >
        <DropdownToggle caret>Dropright</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Another Action</DropdownItem>
          <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
      </ButtonDropdown>
    </>
  );
}

to add those varieties.

We added the direction prop so that we change the menu orientation.

Conclusion

Button dropdowns is a component that comes with Reactstrap.

We can change the orientation and color of them.

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 badges and breadcrumbs with Reactstrap.

Badges

We can add badges to display some content besides another piece of text.

To add them, we use the Badge component:

import React from "react";
import { Badge } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <h1>
        Heading <Badge color="primary">New</Badge>
      </h1>
      <h2>
        Heading <Badge color="primary">New</Badge>
      </h2>
      <h3>
        Heading <Badge color="primary">New</Badge>
      </h3>
      <h4>
        Heading <Badge color="primary">New</Badge>
      </h4>
      <h5>
        Heading <Badge color="primary">New</Badge>
      </h5>
      <h6>
        Heading <Badge color="primary">New</Badge>
      </h6>
    </div>
  );
}

We add badges in various heading tags.

The color prop changes the color.

The badges scale to the same size as the text beside it.

Badges can be used for counters in buttons:

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

export default function App() {
  return (
    <div className="App">
      <Button color="primary" outline>
        messages <Badge color="info">100</Badge>
      </Button>
    </div>
  );
}

We add the Badge in the button to display a number beside the button text.

Contextual Variations

There are many variations of badges.

They have different colors.

We can change the color prop:

import React from "react";
import { Badge } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Badge color="primary">Primary</Badge>
      <Badge color="secondary">Secondary</Badge>
      <Badge color="success">Success</Badge>
      <Badge color="danger">Danger</Badge>
      <Badge color="warning">Warning</Badge>
      <Badge color="info">Info</Badge>
      <Badge color="light">Light</Badge>
      <Badge color="dark">Dark</Badge>
    </div>
  );
}

We set the color prop to those choices to set the colors we want.

Pills

We can make them rounded with the pill prop:

import React from "react";
import { Badge } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Badge color="primary" pill>
        Primary
      </Badge>
      <Badge color="secondary" pill>
        Secondary
      </Badge>
      <Badge color="success" pill>
        Success
      </Badge>
      <Badge color="danger" pill>
        Danger
      </Badge>
      <Badge color="warning" pill>
        Warning
      </Badge>
      <Badge color="info" pill>
        Info
      </Badge>
      <Badge color="light" pill>
        Light
      </Badge>
      <Badge color="dark" pill>
        Dark
      </Badge>
    </div>
  );
}

The pill prop make the border-radius rounder.

Links

Badges can also have links.

For example, we can write add the href prop to them:

import React from "react";
import { Badge } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Badge href="#" color="primary">
        Primary
      </Badge>
      <Badge href="#" color="secondary">
        Secondary
      </Badge>
      <Badge href="#" color="success">
        Success
      </Badge>
      <Badge href="#" color="danger">
        Danger
      </Badge>
      <Badge href="#" color="warning">
        Warning
      </Badge>
      <Badge href="#" color="info">
        Info
      </Badge>
      <Badge href="#" color="light">
        Light
      </Badge>
      <Badge href="#" color="dark">
        Dark
      </Badge>
    </div>
  );
}

The href prop goes in the Badge component.

Breadcrumbs

Breadcrumbs let us navigate to different pages by providing the links for the navigation hierarchy.

To add it, we use the Breadcrumb and BreadcrumbItem components.

For example, we write:

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

export default function App() {
  return (
    <div className="App">
      <Breadcrumb>
        <BreadcrumbItem active>Home</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbItem>
          <a href="#">Home</a>
        </BreadcrumbItem>
        <BreadcrumbItem active>Profile</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbItem>
          <a href="#">Home</a>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <a href="#">Profile</a>
        </BreadcrumbItem>
        <BreadcrumbItem active>Setting</BreadcrumbItem>
      </Breadcrumb>
    </div>
  );
}

The Breadcrumb component has the breadcrumb and BreadcrumbItem component has the breadcrumb item.

The active prop makes an item active.

If it’s active, then it shouldn’t have a link.

Other props include tag to change the tag that the breadcrumb is rendered as.

listTag is the tag that the breadcrumb list container are rendered as.

BreadcrumItem also takes a tag prop to change the tag it’s rendered as.

For example, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Breadcrumb tag="nav" listTag="div">
        <BreadcrumbItem tag="a" href="#">
          Home
        </BreadcrumbItem>
        <BreadcrumbItem tag="a" href="#">
          Profile
        </BreadcrumbItem>
        <BreadcrumbItem tag="a" href="#">
          Settings
        </BreadcrumbItem>
        <BreadcrumbItem active tag="span">
          Language
        </BreadcrumbItem>
      </Breadcrumb>
    </div>
  );
}

We set the tags to change the element they’re rendered as.

Conclusion

Reactstrap comes with components for badges and breadcrumbs.