Category: JavaScript

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 a navbar and nav with Reactstrap.

Vertical Nav

A nav component can be vertical.

It’s useful for displaying links vertically.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav vertical>
        <NavLink href="#">foo</NavLink>
        <NavLink href="#">bar</NavLink>
        <NavLink href="#">baz</NavLink>
        <NavLink disabled href="#">
          disabled
        </NavLink>
      </Nav>
    </div>
  );
}

All we did is ad the vertical prop to the Nav and it’ll render vertically.

We can do the same thing with a list-based nav:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav vertical>
        <NavItem>
          <NavLink href="#">foo</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">bar</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">baz</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

Tabs

We can disable navs in tab form.

For instance, we can write:

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

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

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

  return (
    <div>
      <Nav tabs>
        <NavItem>
          <NavLink href="#" active>
            link
          </NavLink>
        </NavItem>
        <Dropdown nav isOpen={dropdownOpen} toggle={toggle}>
          <DropdownToggle nav caret>
            drop down
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>1</DropdownItem>
            <DropdownItem disabled>2</DropdownItem>
            <DropdownItem>3</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>4</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <NavItem>
          <NavLink href="#">another link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">some Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We have a Nav with the tabs prop to display the nav as tabs.

And we have the NavItem component to display the nav item.

NavLink has the link.

We can add a dropdown to it with the Dropdown component.

Inside it, we have the DropdownToggle and DropdownMenu components.

The drop down is controlled with the isOpen prop, which is controlled by the toggle callback.

The nav prop makes it fit within the nav.

The active prop highlights the nav item.

Pills

We can also display navs in pills form.

For instance, we can write:

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

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

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

  return (
    <div>
      <Nav pills>
        <NavItem>
          <NavLink href="#" active>
            link
          </NavLink>
        </NavItem>
        <Dropdown nav isOpen={dropdownOpen} toggle={toggle}>
          <DropdownToggle nav caret>
            drop down
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>1</DropdownItem>
            <DropdownItem disabled>2</DropdownItem>
            <DropdownItem>3</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>4</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <NavItem>
          <NavLink href="#">another link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">some Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

All we did is switch the tabs prop with the pills prop.

Conclusion

We can display navs in various ways.

They can be shown as tabs or pills.

We can also add dropdowns into them.

And they can also be vertical.

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 a navbar and nav with Reactstrap.

Basic Navbar

We can create a navbar with various components put together.

For instance, we can write:

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

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

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

return (
    <div>
      <Navbar color="light" light expand="md">
        <NavbarBrand href="/">app</NavbarBrand>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="mr-auto" navbar>
            <NavItem>
              <NavLink href="/foo/">foo</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://example.com">example</NavLink>
            </NavItem>
            <UncontrolledDropdown nav inNavbar>
              <DropdownToggle nav caret>
                options
              </DropdownToggle>
              <DropdownMenu right>
                <DropdownItem>option 1</DropdownItem>
                <DropdownItem>option 2</DropdownItem>
                <DropdownItem divider />
                <DropdownItem>reset</DropdownItem>
              </DropdownMenu>
            </UncontrolledDropdown>
          </Nav>
          <NavbarText>more text</NavbarText>
        </Collapse>
      </Navbar>
    </div>
  );
}

Narbar is the whole navbar container. We can change the color with the color prop.

light makes the color light.

expand has the breakpoint to expand the navbar to the full navbar.

NavbarBrand has the brand name or logo.

NavItem has the nav item

NavLink is a link on the navbar.

UncontrolledDropdown is a dropdown.

We need the nav and inNavbar props to make it fit within the navbar.

DropdownToggle has the dropdown toggle.

NavbarText has the text.

NavbarToggler has the toggle for the navbar menu.

We put them all in the Collapse component so that they collapse when the breakpoint is less than the one specified with expand .

NavbarToggler

NavbarToggler should be after the NavbarBrand so that it appears on the right.

We can flip the order to have it appear on the left.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink
} from "reactstrap";

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

const toggleNavbar = () => setCollapsed(!collapsed);

return (
    <div>
      <Navbar color="faded" light>
        <NavbarBrand href="/" className="mr-auto">
          app
        </NavbarBrand>
        <NavbarToggler onClick={toggleNavbar} className="mr-2" />
        <Collapse isOpen={!collapsed} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink href="/foo/">foo</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://example.com">GitHub</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

to add a navbar with the Navbar component.

Then we add the NavbarBrand and NavbarToggler win the order we want.

It takes an onClick prop to let us toggle the navbar by setting the collapsed state.

Nav

A Nav component is another component for navigation.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav>
        <NavItem>
          <NavLink href="#">foo</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">bar</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">baz</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We have the Nav component with the NavItem and NavLink components inside it to add the links.

Also, we can just nest the NavLink with the Nav component by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav>
        <NavLink href="#">foo</NavLink>
        <NavLink href="#">bar</NavLink>
        <NavLink href="#">baz</NavLink>
        <NavLink disabled href="#">
          disabled
        </NavLink>
      </Nav>
    </div>
  );
}

The disabled prop disables the NavLink in both examples.

Conclusion

We can add navbars and navs easily with Reactstrap.

They’re responsive so they work with all screen sizes.

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

Popovers Placements

Popover placements can be placed in various positions.

We just have to change the placement prop to change the placement.

For instance, we can write:

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

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

  const toggle = () => setPopoverOpen(!popoverOpen);

  return (
    <div>
      <Button id="Popover" type="button">
        Launch Popover
      </Button>
      <Popover
        placement="bottom"
        isOpen={popoverOpen}
        target="Popover"
        toggle={toggle}
      >
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </PopoverBody>
      </Popover>
    </div>
  );
}

to set the placement to bottom with the placement prop.

Other possible values include top , left , and right .

UncontrolledPopovers

We don’t need to control the state of the popover to open or close it.

This can be done with the UncontroledPopover component.

This is useful if we don’t need to control the popover programmatically.

For instance, we can use it by writing:

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

export default function App() {
  return (
    <div>
      <Button id="UncontrolledPopover" type="button">
        Launch Popover
      </Button>
      <UncontrolledPopover placement="bottom" target="UncontrolledPopover">
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </PopoverBody>
      </UncontrolledPopover>
    </div>
  );
}

We have the Button and the UncontrolledPopover component to let us toggle the popover.

The id of the trigger component and the target of the UncontrolledPopover has to match.

Repositioning Popovers

We can reposition popover content on update.

For instance, we can write;

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Button,
  UncontrolledPopover,
  PopoverHeader,
  PopoverBody,
  Collapse
} from "reactstrap";

const PopoverContent = ({ scheduleUpdate }) => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <PopoverHeader>Update</PopoverHeader>
      <PopoverBody>
        <Button onClick={() => setIsOpen(!isOpen)}>Click me</Button>
        <Collapse
          isOpen={isOpen}
          onEntered={scheduleUpdate}
          onExited={scheduleUpdate}
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </Collapse>
      </PopoverBody>
    </>
  );
};

export default function App() {
  return (
    <div className="text-center">
      <Button id="ScheduleUpdateButton" type="button">
        Open Popover
      </Button>
      <UncontrolledPopover
        trigger="click"
        placement="top"
        target="ScheduleUpdateButton"
      >
        {({ scheduleUpdate }) => (
          <PopoverContent scheduleUpdate={scheduleUpdate} />
        )}
      </UncontrolledPopover>
    </div>
  );
}

We create the PopoverContent component that takes a scheduleUpdate prop to lets us change the position when we click on a button.

The PopoverContent component to call scheduleUpdate when the Collapse content is shown or hidden.

The onEntered callback is run when the content is shown and onExited callback is run when the content is hidden.

Conclusion

Popover placements can be changed statically or dynamically.

Also, we can add an UncontrolledPopover to let us display a popover without controlling its state.

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

Buttons

Reactstrap comes with its own button component.

To add it, we use the Button component:

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

export default function App() {
  return (
    <>
      <Button color="primary" className="mr-2">
        primary
      </Button>
      <Button color="secondary" className="mr-2">
        secondary
      </Button>
      <Button color="success" className="mr-2">
        success
      </Button>
      <Button color="info" className="mr-2">
        info
      </Button>
      <Button color="warning" className="mr-2">
        warning
      </Button>
      <Button color="danger" className="mr-2">
        danger
      </Button>
      <Button color="link" className="mr-2">
        link
      </Button>
    </>
  );
}

We add the Button component with the color prop to change the color of the button.

The mr-2 class adds some right margins.

Outline Buttons

Buttons can also have outline styles.

To add them, we add the outline prop:

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

export default function App() {
  return (
    <>
      <Button outline color="primary" className="mr-2">
        primary
      </Button>
      <Button outline color="secondary" className="mr-2">
        secondary
      </Button>
      <Button outline color="success" className="mr-2">
        success
      </Button>
      <Button outline color="info" className="mr-2">
        info
      </Button>
      <Button outline color="warning" className="mr-2">
        warning
      </Button>
      <Button outline color="danger" className="mr-2">
        danger
      </Button>
      <Button outline color="link" className="mr-2">
        link
      </Button>
    </>
  );
}

Sizes

We can add the size prop to change the size.

lg makes it big and sm makes it small.

We can add that by writing:

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

export default function App() {
  return (
    <>
      <Button color="primary" size="lg">
        Large Button
      </Button>
      <Button color="primary" size="sm">
        Small Button
      </Button>
    </>
  );
}

We added a large and small button with the size prop.

To make the button a block element, we can use the block prop:

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

export default function App() {
  return (
    <>
      <Button color="primary" size="lg" block>
        Large Button
      </Button>
    </>
  );
}

This will then span the whole row.

Active State

To make a button show the active state, we can add the active prop.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Button color="primary" size="lg" active>
        Large Button
      </Button>
    </>
  );
}

The active state will be darker than the non-active state.

Disabled State

We can disable a button with the disabled prop.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Button color="primary" size="lg" disabled>
        Large Button
      </Button>
    </>
  );
}

Checkbox and Radio Buttons

We can make radio buttons out of Button components.

To do that, we put them in a button group.

For instance, we can write:

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

export default function App() {
  const [rSelected, setRSelected] = React.useState(null);

  return (
    <>
      <ButtonGroup>
        <Button
          color="primary"
          onClick={() => setRSelected(1)}
          active={rSelected === 1}
        >
          apple
        </Button>
        <Button
          color="primary"
          onClick={() => setRSelected(2)}
          active={rSelected === 2}
        >
          orange
        </Button>
        <Button
          color="primary"
          onClick={() => setRSelected(3)}
          active={rSelected === 3}
        >
          grape
        </Button>
      </ButtonGroup>
    </>
  );
}

We have a ButtonGroup to group all the buttons together.

Then we have the onClick prop for each button to set the rSelected state.

The active prop let us set the condition for it to be active.

We can also use buttons as checkbox buttons.

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() {
  const [cSelected, setCSelected] = React.useState([]);

  const onCheckboxBtnClick = selected => {
    const index = cSelected.indexOf(selected);
    if (index < 0) {
      cSelected.push(selected);
    } else {
      cSelected.splice(index, 1);
    }
    setCSelected([...cSelected]);
  };

  return (
    <>
      <ButtonGroup>
        <Button
          color="primary"
          onClick={() => onCheckboxBtnClick(1)}
          active={cSelected.includes(1)}
        >
          apple
        </Button>
        <Button
          color="primary"
          onClick={() => onCheckboxBtnClick(2)}
          active={cSelected.includes(2)}
        >
          orange
        </Button>
        <Button
          color="primary"
          onClick={() => onCheckboxBtnClick(3)}
          active={cSelected.includes(3)}
        >
          grape
        </Button>
      </ButtonGroup>
    </>
  );
}

We have the onCheckboxBtnClick function that runs to remove the selection if it already exists.

Otherwise, it adds it to the cSelected array.

The active prop’s condition now checks if the selection is in the cSelected array instead of checking for equality.

This is because checkboxes can save multiple choices.

Conclusion

Buttons have many uses. They can be used individually or as checkboxes or radio buttons.

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

Dropdowns

We can add dropdowns with the Dropdown , DropdownToggle , DropdownMenu and DropdownItem components.

For example, we can write:

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

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

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>Dropdown</DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem disabled>Action (disabled)</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

We have the Dropdown component with the isOpen prop to control its opening state.

toggle has the function to toggle the dropdownOpen state to toggle the dropdown.

DropdownMenu has the menu.

DropdownItem has the menu item.

The divider prop turns it into a divider.

The disabled prop makes the action disabled.

DropdownToggle has the dropdown toggle.

Alignment

We can align the menu with some props.

To make it align to the right, we can use the right prop on the DropdownMenu :

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

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

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>Dropdown</DropdownToggle>
      <DropdownMenu right>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem disabled>Action (disabled)</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

Menu Headers

The header prop adds the menu header as we can see from the menu above.

Sizing

The size of the button can change.

For example, we can set the size to lg to make the button large:

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

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

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle} size="lg">
      <DropdownToggle caret>Dropdown</DropdownToggle>
      <DropdownMenu right>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem disabled>Action (disabled)</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

The size prop is added to the Dropdown .

Custom Dropdown

We can put different elements into the DropdownMenu component.

For example, we can write:

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

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

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle
        tag="span"
        data-toggle="dropdown"
        aria-expanded={dropdownOpen}
      >
        Custom Dropdown Content
      </DropdownToggle>
      <DropdownMenu className="p-3">
        <div onClick={toggle}>item</div>
        <div onClick={toggle}>item</div>
        <div onClick={toggle}>item</div>
        <div onClick={toggle}>item</div>
      </DropdownMenu>
    </Dropdown>
  );
}

We have divs inside the DropdownMenu instead of DropdownItem s.

Uncontrolled Dropdown

We can add uncontrolled dropdowns to our app.

They’re useful for situations when we don’t have control the dropdown state programmatically.

For example, we can write:

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

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

We use the UncontrolledDropdown component to add an uncontrolled dropdown.

Drop Direction Variations

Dropdowns can be displayed in different directions.

We can change it with the direction prop.

For example, we can write:

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

export default function App() {
  const [isOpenLeft, setDropdownOpenLeft] = React.useState(false);
  const [isOpenUp, setDropdownOpenUp] = React.useState(false);
  const [isOpenRight, setDropdownOpenRight] = React.useState(false);

  const toggleLeft = () => setDropdownOpenLeft(prevState => !prevState);
  const toggleRight = () => setDropdownOpenRight(prevState => !prevState);
  const toggleUp = () => setDropdownOpenUp(prevState => !prevState);

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

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

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

We set the direction with the direction prop.

The caret adds the arrow in the correct direction.

Conclusion

We can add dropdowns that are displayed the way we want.

They can be displayed in any direction.